JSFiddle - React, Tailwind, and code Playground
HTML
<div class="booking">
<div class="left_bl">
<p>Заезд</p>
<p class="big">01 <span class="date"><span class="border">02.20</span>16</span> <i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="center_bl">
<p>Выезд</p>
<p class="big">14 <span class="date"><span class="border">02.20</span>16</span><i class="fa fa-angle-down" aria-hidden="true"></i></p>
</div>
<div class="right-bl">
<button>забронировать</button>
</div>
CSS
.booking {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-pack: distribute;
justify-content: space-around;
background: #bea387;
color: #fff;
padding: 25px 25px 25px 45px;
-webkit-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
margin: auto; }
@media (max-width: 500px) {
.booking {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; } }
.booking .left_bl, .booking .right_bl, .booking .center_bl {
min-width: 220px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: auto 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.booking button {
margin-top: 40px;
margin-bottom: 40px;
background-color: transparent;
padding: 10px 35px;
border: 2px solid #fff;
font-size: 16px;
color: #fff; }
.booking .big {
font-size: 60px;
font-family: TheanoDidotRegular; }
.booking .big .date {
font-size: 16px;
font-family: RalewayRegular;
vertical-align: top;
padding-top: 20px;
display: inline-block; }
.booking .big .border {
border-bottom: 1px solid;
padding-bottom: 3px; }
.booking .big .fa-angle-down {
font-size: 33px;
font-weight: bold;
vertical-align: super;
margin-left: 15px; }
JavaScript
$('#datep-1').datepicker({
dateFormat: 'mm.yy',
showOn: "both",
buttonImage: "images/str.gif",
buttonImageOnly: true,
defaultDate: "null",
});
});