JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content">
<p align="left">Basic function and Scope <span style="color:red">*</span>
<textarea name="text" cols="80" rows="3" class="intro" style="float:right"></textarea>
</p><br/><br/>
<p>Task and duties <span style="color:red">*</span>
<textarea name="text" cols="80" rows="3" class="intro" style="float:right"></textarea>
</p><br/><br/>
<p>Work contacts <span style="color:red">*</span>
<textarea name="text" cols="80" rows="3" class="intro" style="float:right"></textarea>
</p><br/><br/>
<p>Independence of operation <span style="color:red" >*</span>
<textarea name="text" cols="80" rows="3" class="intro" style="float:right"></textarea><
</p><br/><br/>
<p>Supervisory responsability <span style="color:red">*</span>
<input type="radio" name="tip" value="Supervision"
checked="checked" style="margin-left:15px"/> Supervision
<input type="radio" name="tip" value="Direction"
checked="checked"/>Direction
<input type="radio" name="tip" value="None" />
None</p>
<div id="left">
<textarea name="text" cols="50" rows="3" class="intro2" style="float:right"></textarea>
</div>
<br>
<div id="one">
<p>Total number of subordinates
<textarea name="text" cols="40" rows="1" class="intro2" style="float:right"></textarea>
</p>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>Physical effort <span style="color:red">*</span>
<textarea name="text" cols="80" rows="3" class="intro" style="float:right"></textarea></p>
<br/>
<br>
<p>Work conditions <span style="color:red">*</span>
<textarea name="text" cols="80" rows="3" class="intro" style="float:right"></textarea></p>
<br/>
<br/>
<br/>
<br/>
<p style="color:#008AE6"><b> Minimum requirements</b></p>
</div>
CSS
#content { background-color:#f2f2f2;
width:99%;
height:100%;
border:1%;
border-color:#fff;
font-family:Arial;
font-size:12px;
}
.intro { width:88%;
background-color:#fff;}
.intro2 { width:76%;
background-color:#fff;}
#left {
float: left;
width: 50%;
}
#one {
float: right;
width: 50%;
vertical-align:top;
}