JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-sm-4">
<table>
<tbody><tr>
<td><label for="">Design number</label></td>
<td><input type="text" name="Design number" value="SK123"></td>
</tr>
<tr>
<td><label for="">Price</label></td>
<td><input type="text" name="Price" value="500"></td>
</tr>
<tr>
<td><label for="">Never Out Of Stock</label></td>
<td><label><input type="checkbox" value=""></label></td>
</tr>
<tr>
<td><label for="">Pattern</label></td>
<td>
<label> <input type="checkbox" value="">Stripes</label>
<label><input type="checkbox" value="">Checks</label>
<label><input type="checkbox" value="">Prints</label>
<label><input type="checkbox" value="">Solid</label>
</td>
</tr>
<tr>
<td><label for="">Color</label></td>
<td>
<label><input type="checkbox" value="">White</label>
<label><input type="checkbox" value="">Blue</label>
<label><input type="checkbox" value="">Green</label>
<label><input type="checkbox" value="">Red</label>
<label><input type="checkbox" value="">Yellow</label>
</td>
</tr>
<tr>
<td><label for="">Occasion</label></td>
<td>
<label><input type="checkbox" value="">Casual</label>
<label><input type="checkbox" value="">Fancy</label>
<label><input type="checkbox" value="">Office</label>
</td>
</tr>
<tr>
<td><label for="">Fabric</label></td>
<td>
<label><input type="checkbox" value="">Silk</label>
<label><input type="checkbox" value="">Denim</label>
<label><input type="checkbox" value="">Velvet</label>
</td>
...
CSS
table {
width:800px;
}
table tr {
}
table td {
width:70%;
padding-bottom: 5px;
padding-top: 5px;
border-bottom:solid 1px #dddddd;
}
table td:first-child {
width:30%;
}
label {
min-width:75px;
margin-left:10px;
}
input[type="checkbox"] {
margin-right:5px;
}