JSFiddle - React, Tailwind, and code Playground
by Yonas Hailu
HTML
<h4 class="green">I am a Headline...</h4>
<div class="border-left">
<div class="mos-form-group">
<div class="col_half">
<label>Scelerisque ultricies elementum placerat sociis massa cras natoque dignissim dapibus lundium vel, eu arcu porttitor, adipiscing. In cursus. Natoque nunc et, elementum mattis etiam ac! Massa in natoque est scelerisque aliquet massa, sagittis diam? Proin? Urna? Sed urna! Cum elit, augue habitasse? Mauris et ut dignissim integer a! Nisi urna?</label>
</div>
<div class="input col_half col_last">
<select class="selectpicker" name="bkv_q1">
<option>Nein</option>
<option>Ja</option>
</select><span class="input-group-addon ttbtn active"></span>
</div>
</div>
CSS
.mos-form-group {
position: relative;
clear: both;
height: auto;
margin: 4px 0;
width: 100%;
border: 1px solid #fff;
border-radius: 4px;
padding: 10px 15px;
cursor: pointer;
display: inline-block !important;
}
.mos-form-group > * {
display: inline-block !important;
vertical-align: middle !important;
float: initial !important;
margin-right: initial !important;
}
form .col_full, form .col_half, form .col_one_third, form .col_two_third, form .col_three_fourth, form .col_one_fourth, form .col_one_fifth, form .col_two_fifth, form .col_three_fifth, form .col_four_fifth, form .col_one_sixth, form .col_five_sixth {
margin-bottom: 0px;
}
.postcontent, .sidebar, .col_full, .col_half, .col_one_third, .col_two_third, .col_three_fourth, .col_one_fourth, .col_one_fifth, .col_two_fifth, .col_three_fifth, .col_four_fifth, .col_one_sixth, .col_five_sixth {
display: block;
position: relative;
margin-right: 4%;
margin-bottom: 0px;
float: left;
}
.col_half {
width: 48%;
}
.col_last {
margin-right: 0 !important;
clear: right;
}
.green {
color: #46ae4d !important;
}
.border-left {
border-left: 3px solid #46ae4d;
padding-left: 10px;
margin-bottom: 40px;
margin-left: 3px;
}