JSFiddle - React, Tailwind, and code Playground

by Vishnuprasad ps

HTML

<!-- change the width of "jhLbl" (now 150px) whatever you want (same as current span width)
also change the padding-left of "ul.jhBlock li" (padding should be +10 than "jhLbl) -->


<ul class="jhBlock">
<li>
<div class="jhLbl">Title text</div>
<input type="text"><input type="text">
</li>
<li><input type="text"><input type="text"></li>
<li><input type="text"><input type="text"></li>
<li><input type="text"><input type="text"></li>
</ul>

CSS

* {
  box-sizing: border-box;
}

/* add classes from below */
ul.jhBlock {
  float:left;
  width:100%;
  list-style: none;
  padding:0;
  margin:0;
}
.jhLbl {
  float:left;
  width:150px;
  text-align: right;
  padding-right: 10px;
}
ul.jhBlock li:first-child {
  float:left;
  width:auto;
  padding-left:10px;
}
ul.jhBlock li {
  float:left;
  width:100%;
  padding-left:160px;
  margin-bottom:10px;
}
ul.jhBlock li input {
  margin-right:5px;
}