JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nithin</a> </li>
	<li><a href="#tabs-2">Vipin</a></li>
  </ul>
  <div id="tabs-1">
    <div id="maindiv">
		<div>
			<label>Name:</label>
			<input type="text" name="name" value="" class="field" />
		</div>
		<div>
			<label>Age:</label>
			<input type="text" name="name" value="" class="field" />
		</div>
		<div>
			<label>Email:</label>
			<input type="text" name="name" value="" class="field" />
		</div>
		<div>
			<label>Phone:</label>
			<input type="text" name="name" value="" class="field" />
		</div>
    </div>	
  </div>
  <div id="tabs-2">
    <p>Vipin</p>
  </div>
</div>

CSS

label, input[type="text"]{
    float:left;
    display:block;
}
label
{
    margin-right: 5px;
}
.field{
    width:100%;
    overflow:auto;
    margin:5px 0px;
}

JavaScript

$(function() {
  $("#tabs").tabs();
    var max = 0;
    $("label").each(function(){
        if ($(this).width() > max)
            max = $(this).width();    
    });
    $("label").width(max);
});