JSFiddle - React, Tailwind, and code Playground
by Santosh Thakur
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid mt-4">
<div class="room-1">
<div class="row">
<div class="col-2">
<strong> Room 1 </strong>
</div>
<div class="col-5">
<label for="usr">Adults Above 12 years:</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-primary" type="submit">Sub</button>
</div>
<input type="text" class="form-control" placeholder="1">
<div class="input-group-append">
<button class="btn btn-outline-primary" type="submit">Add</button>
</div>
</div>
</div>
<div class="col-5">
<label for="usr">Child Below 12 years:</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-primary" type="submit">Sub</button>
</div>
<input type="text" class="form-control" placeholder="1">
<div class="input-group-append">
<button class="btn btn-outline-primary" type="submit">Add</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-2">
Child
</div>
<div class="col">
<label for="usr">Age of Child</label>
<div class="input-group mb-3">
<!-- <input type="text" class="form-control" placeholder="1"> -->
<select name="cars" class="custom-select">
<option selected> ( < 1) </option>
<option value="1">1</option>
<option value="2">2</option>
...
CSS
.room-1 {
border: 1px solid green;
}
.room-2 {
border: 1px solid red;
}
.room-3 {
border: 1px solid blue;
}
.room-4 {
border: 1px solid yellow;
}