Problems with float css property

Personal was wanting these three elements to date the location and this green button to be side by side in the center of the screen on both desktop and mobile I need to do this with float else I can not use framework as bootstrap and nor media queries if possible I tried here but the elements get very close together and in mobile it gets crooked follows the images and the code

HTML:

<divclass="callbacks_container">
            <ul class="rslides" id="slider4">
                <li>
                    <div class="banner-01-header">
                        <img src="images/bg-palestrantes-v2.jpg" class="img-slide" >
                        <div class="content-header">
                            <img src="images/logo-www.png" class="logo-center">
                            <h2 class="title">Você já pensou em ser uma mulher mais poderosa?</h2>
                            <div class="info-date">
                                <p class="date-event"><b><span>27, 28 e 29</span></b> <br> de Outubro</p>
                                <a href="#" class="link-garanta-vaga">Garanta sua vaga</a>
                                <p class="address-hotel"><b>Sheraton São Paulo <br> WTC Hotel</b> <br>
                                        São Paulo | SP | Brasil</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="banner-01-header">
                        <img src="images/2.jpg" class="img-slide">
                        <a href="#" class="link-garanta-vaga">Garanta sua vaga</a>
                    </div>
                </li>
            </ul>
        </div>

CSS:

.banner-01-header{
  position: relative;
  height: 700px;
}

.banner-01-header .content-header{
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
}

.banner-01-header .content-header .logo-center{
  margin-top: 30px;
}

.banner-01-header .content-header .title{
  text-transform: uppercase;
  color: #fff;
  margin-top: 20px;
}

.banner-01-header .content-header .info-date{
  display: inline-block;
  margin: 275px auto;
}

.banner-01-header .content-header .info-date .date-event{
  color: #fff;
  float: left;

}

.banner-01-header .content-header .info-date .date-event span{
  font-size: 35px;
}

.banner-01-header .content-header .info-date .link-garanta-vaga{
    border-radius: 0 30px !important;
    background: #28b40d !important;
    background: -moz-linear-gradient(top, #28b40d 0%, #49ed16 100%) !important;
    background: -webkit-linear-gradient(top, #28b40d 0%,#49ed16 100%) !important;
    background: linear-gradient(to bottom, #28b40d 0%,#49ed16 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28b40d', endColorstr='#49ed16',GradientType=0 ) !important;
    border: 3px solid rgba(0, 0, 0, 0.41) !important;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.35) !important;
    text-shadow: 1px 1px #013600;
    color: #fff;
    font-size: 25px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    padding: 13px 65px;
    display: inline-block;
    float: left;
  }

.banner-01-header .content-header .info-date .address-hotel{
  color: #fff;
  text-align: left;
  float: left;
  font-size: 18px;
}