JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form-control" data-layoutOrder="horizontal">
<div data-section="title">
<label for="firstName">First Name</label>
</div><!--
--><div data-section="data">
<input type="text" placeholder="First Name" id="firstName">
</div>
</div>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.form-control {
 background-color: yellow;
 margin:0;
 padding:0;
}

.form-control[data-layoutOrder=horizontal] div[data-section=title]{
 display:inline-block;
 background-color : red;
 width: 50%;
 margin:0;
 padding:0;
}

.form-control div[data-section=data] {
 background-color : green;
 display: inline-block;
 width: 50%;
 margin:0;
 padding:0;
}