JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<label for="inputPassword4">Password</label>
<input type="password" id="inputPassword4" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
<small id="passwordHelpInline" class="text-muted">
Must be 8-20 characters long.
</small>
</div>
</form>
<form class="form-horizontal">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="email" class="col-sm-4 control-label">in</label>
<div class="col-xs-4 pull-right">
<input type="text" class="form-control" placeholder="Postcode" />
</div>
<div class="col-xs-4 pull-right">
<input type="text" class="form-control" placeholder="Postcode" />
</div>
</div>
</div>
</div>
<label for="" class="col-xs-12">Pre-LASIK Keratometry values:</label>
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control col-6" placeholder=".col-3">
</div>
<div class="col-xs-6">
<input type="text" class="form-control" placeholder=".col-4">
</div>
<div class="col-xs-6">
<input type="text" class="form-control col-6" placeholder=".col-3">
</div>
<div class="col-xs-6">
<input type="text" class="form-control" placeholder=".col-4">
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="email" class="col-xs-2 control-label">under</label>
<div class="col-xs-10">
<select class="form-control">
...
CSS
.panel-default {
background-color: #e6ed9f;
}
.arh .cover-col {
height: 6em;
}
.cover-col .btn {
display: block;
width: 100%;
height: 100%;
padding-left: 15px;
padding-right: 15px;
}
.cover-col .form-group {
height: 100%;
margin-bottom: 0;
}
.cover-col .form-group > div {
height: 100%;
}