JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<h2>New Incident</h2>
<div class="wrap">
<div class="row col2">
<div class="coll">
<label>Request Type</label>
<input type="dropdown" />
</div>
<div class="colr">
<label>Impact</label>
<input type="dropdown" />
</div>
</div>
<div class="row col2">
<div class="coll">
<label>Status</label>
<input type="dropdown" />
</div>
<div class="colr">
<label>Impact details</label>
<textarea></textarea>
</div>
</div>
<div class="row col2">
<div class="colr">
<label>Priority</label>
<input type="dropdown" />
</div>
</div>
</div>
<div class="extra_wrap">
<div class="extra">
<h3>Requester details</h3>
<div class="row col2">
<div class="coll">
<label>Name</label>
<input type="dropdown" />
</div>
<div class="colr">
<label>Asset</label>
<input type="dropdown" />
</div>
</div>
<div class="row col2">
<div class="coll">
<label>Contact Number</label>
<input type="dropdown" />
</div>
<div class="colr">
<label>Department</label>
<input type="dropdown" />
</div>
</div>
<div class="row col2">
<div class="coll">
<label>Job Title</label>
<input type="dropdown" />
...
CSS
#container {
border: 1px solid #8cbae8;
font-family: Verdana;
font-size: 0.8em;
line-height: 20px;
}
#container h2 {
background: #3466a9;
color: #fff;
padding: 3px 5px;
font-size: 1.1em;
font-weight: bold;
}
#container h3 {
color: #006699;
background: #bbd9f6;
padding: 0 5px;
border-bottom: 1px solid #8cbae8;
}
#container .extra_wrap {
padding: 5px;
}
#container .wrap {
padding: 0 6px;
}
#container .extra {
border: 1px solid #8cbae8;
}
#container .row {
padding: 5px 0;
overflow: auto;
}
#container .row .coll {
width: 45%;
overflow: auto;
float: left;
}
#container .row .colr {
width: 55%;
overflow: auto;
float: right;
}
#container label {
text-align: right;
display: block;
width: 35%;
padding: 0 5px;
float: left;
}
#container .col1 label {
width: 15.7%;
float: left;
}
#container input {
width: 53%;
float: left;
}
#container .col1 input {
width: 81.5%;
float: left;
}
#container .wysiwyg {
width: 82%;
height: 200px;
float: left;
background: #ebf2f8;
padding-right: 4px;
padding-bottom: 4px;
}
#container .wysiwyg textarea {
width: 100%;
height: 100%;
border: 1px solid black;
margin: 0;
padding: 1px;
}