Trying to get two buttons remained in the status column of a grid <p>I'm trying to place a couple of buttons under the Status column as per screenshot.</p> <p>Here's my HTML code below( the picture)</p> <p><img src="https://i.stack.imgur.com/9OKXq.png" alt="enter image description here"></p> <pre><code>&lt;div class="table_heading_row"&gt; &lt;div class="table_column" style="width: 100px;"&gt; Leave Type &lt;/div&gt; &lt;div class="table_column" style="width: 100px;"&gt; Total Count &lt;/div&gt; &lt;div class="table_column" style="width: 150px;"&gt; Start Date &lt;/div&gt; &lt;div class="table_column" style="width: 100px;"&gt; End Date &lt;/div&gt; &lt;div class="table_column" style="width: 100px;"&gt; Status &lt;/div&gt; &lt;/div&gt; &lt;div class="table_row 1"&gt; &lt;div class="table_column" style="width: 100px;"&gt; Sick Leave &lt;/div&gt; &lt;div class="table_column" style="width: 150px;"&gt; 2 Days &lt;/div&gt; &lt;div class="table_column" style="width: 100px;"&gt; 2.8.2013 &lt;/div&gt; &lt;div class="table_column" style="width: 100px;"&gt; 3.8.2013 &lt;/div&gt; &lt;div class="table_column" style="width: 100px;"&gt; Rejected &lt;/div&gt; &lt;/div&gt; &lt;div class="table_row 2"&gt; &lt;div class="table_column" style="width: 100px;"&gt; Sick Leave &lt;/div&gt; &lt;div class="table_column" style="width: 150px;"&gt; 3 days &lt;/div&gt; &lt;div class="table_column" style="width: 100px;"&gt; 6.3.2014 &lt;/div&gt; &lt;div class="table_column" style="width: 100px;"&gt; 8.3.2014 &lt;/div&gt; &lt;div class="table_column" style="width: 100px;"&gt; Rejected &lt;/div&gt; &lt;/div&gt; &lt;div class="table_row 3"&gt; &lt;div class="table_column" style="width: 100px;"&gt; Annual Leave &lt;/div&gt; &lt;div class="table_column" style="width: 150px;"&gt; 13 days &lt;/div&gt; &lt;div class="table_column" style="width: 100px;"&gt; 6.3.2014 &lt;/div&gt; &lt;div class="table_column" style="width: 100px;"&gt; 8.3.2014 &lt;/div&gt; &lt;div class="table_column" style="width: 100px; display:inline-flex;"&gt; &lt;div style="float:left; style=" background-color: green; width: 64px;"&gt; &lt;input type="button" name="Approve" value="Approve"&gt; &lt;/div&gt; &lt;div style="float:left;" style="background-color: red;width: 64px;"&gt; &lt;input type="button" name="Reject" value="Reject"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Under the div class <code>table_row3</code> for the annual leave part row, I want to make to make the last column to include two buttons (with some CSS styling on) and I ended up have two green and red buttons stick next each other. Whilst this is the closest resemblance to the picture below, I'm just not sure this is great approach... I need another suggestion of a better way of handling this buttons sitting under the status columns with such margins or paddings.</p> <p>Any ideas?</p> <p>You can also check it live online.</p> <p><a href="http://cms.tmadev.com.au/staffleaveapproval.html" rel="nofollow noreferrer">http://cms.tmadev.com.au/staffleaveapproval.html</a></p>