JSFiddle - React, Tailwind, and code Playground

HTML

<center>
<div class="what"><p>what?</div>
<div class="where">where?</div>
<div>
</center>

<center>
<div class="search-field1">
villages and Berber oases, mountains and gorges ...) and a unique sensation in the azure moroccan. Morocco hot air balloon Discovery formula, VIP, Exclusive or à la carte. Discover our various services, and live with us the pure happiness of a new experience in hot air ballooning, with our experienced pilots, and with all the guarantees of comfort, safety, and wonder.
</div>
<div class="search-field2">
villages and Berber oases, mountains and gorges ...) and a unique sensation in the azure moroccan. Morocco hot air balloon Discovery formula, VIP, Exclusive or à la carte. Discover our various services, and live with us the pure happiness of a new experience in hot air ballooning, with our experienced pilots, and with all the guarantees of comfort, safety, and wonder.
</div>
    </center>

CSS

.what{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #151515;
display: inline-block;
vertical-align: center;
line-height: 35px;

}

.where{
display: inline;
font: 16px HelveticaNeue-Light;
color: #A9E2F3;
font-weight: bold;
height: 35px;
width: 320px;
background: #ffffff;
display: inline-block;
verticle-align: center;
line-height: 35px;
}

.search-field1{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
verticle-align: center;
}

.search-field2{
height: 35px;
width: 320px;
background: #ffffff;
border:1px solid;
border-color: #BDBDBD;
display: inline-block;
horizontal-align: center;
}