JSFiddle - React, Tailwind, and code Playground
HTML
<form>
<fieldset class="w50">
<label>Name</label>
<input type="text" value="Test" />
</fieldset>
<fieldset class="w50">
<label>Surname</label>
<input type="text" value="Test" />
</fieldset>
<fieldset class="w100">
<label>Contact</label>
<input type="text" value="Test" />
</fieldset>
<fieldset class="w50">
<label>Age</label>
<input type="text" value="Test" />
</fieldset>
<fieldset class="w50">
<label>Email</label>
<input type="text" value="Test" />
</fieldset>
<fieldset class="w50">
<label>Phone</label>
<input type="text" value="Test" />
</fieldset>
<fieldset class="w50">
<label>Time</label>
<input type="text" size="20" value="Test" />
</fieldset>
<fieldset class="w50">
<label>Age</label>
<input type="text" value="Test" />
</fieldset>
<fieldset class="w50">
<label for="email">Email</label>
<input type="text" value="Test" />
</fieldset>
</form>
CSS
* {
margin: 0;
padding: 0;
}
form {
padding:1em;
}
label {
width: 60px;
display: inline-block;
}
fieldset {
border:none;
padding:0 0 1em;
}
input {
display:inline;
width:70%;
}
.w30, .w50, .w70, .w100 {
height: 35px;
float: left;
display: inline-block;
width: 100%;
}
.w30{
width: 30%;
}
.w50{
width: 50%;
}
.w70{
width: 70%;
}
.w100{
width: 100%;
}