JSFiddle - React, Tailwind, and code Playground

HTML

<div class='Segment'>
  <div class='DisplayTable InputDivMain' id='MainDiv_01'>
    <div class='DisplayTableCell InputDivTitle'>Search by ID</div>
    <div class='DisplayTableCell InputDiv'>
      <input class='w3-input' type='text'>
    </div>
  </div>
  <div>
    <input type="button" value="Search">
  </div>
</div>
<div class='Segment'>
  <div class='DisplayTable InputDivMain' id='MainDiv_02'>
    <div class='DisplayTableCell InputDivTitle'>Search by Number</div>
    <div class='DisplayTableCell InputDiv'>
      <input class='w3-input' type='text'>
    </div>
  </div>
  <div>
    <input type="button" value="Search">
  </div>
</div>

CSS

.InputDivTitle{
  float: left;
}
.InputDiv{
  position: relative;
  overflow: hidden;
}

.SearchSegment {
	margin-bottom: 20px;
}

.InputDivMain {
	box-sizing: border-box;
	margin-bottom: 5px;
	border-bottom: 1px solid #009688;
	display: table;
	width: 100%;
}

.InputDivMain:hover {
	cursor: text;
}


.InputDiv {
	border: 1px solid red;
	box-sizing: border-box;
}

.InputDiv > input[type=text] {
	border-bottom: 0px;
  width: 100%;
}

.InputDiv > input[type="text"]:focus {
	outline: none;
}

.InputDivTitle {
	box-sizing: border-box;
	border: 1px solid green;
	color: #009688;
	font-size: 120%;
	padding-left: 5px;
	
}

input[type="button"] {
	width: 100%;;
}