I have successfully replicated the screenshot below using CSS/Bootstrap to ensure it looks consistent on both mobile and desktop view.
https://i.sstatic.net/NS4yE.png
For the upper portion of the screen-shot, I have created a fiddle which includes a search-icon (at the extreme left) and ellipsis (at the extreme right).
Additionally, I have also developed a fiddle for the bottom part of the screen-shot featuring 2 rows and 4 columns.
Below are snippets of the HTML code used to create the row and search icon:
Row:
<tr>
<th scope="col">Name</th>
<th scope="col" class="number">Number</th>
<th scope="col" class="table2">Table</th>
<th scope="col" class="status">Status</th>
</tr>
Search-form:
<form class="back">
<span class="fa fa-search searchicon" aria-hidden="true"></span>
<input type="text" name="search" class="extand ">
</form>
Issue Statement:
The reason for creating two separate fiddles is that when I combine the table row and column code (from the 2nd fiddle) on my personal computer, there is a noticeable WHITE SPACE AT THE EXTREME RIGHT.
MY QUERY IS, upon merging the two code snippets (from 2 different fiddles), I am experiencing an unexpected space at the far right on my PC during mobile view as highlighted with a green arrow in the image below.
I am seeking guidance on what modifications can be made to the fiddles above to eliminate this right-sided space issue.