I am having trouble arranging a list of buttons horizontally. My goal is to have each row display two buttons - one on the left side and one on the right side. Occasionally, the left button needs to be hidden using display: none, but I still want the right button to remain on the right-hand side of the row.
Although I am using Bootstrap, I couldn't find a suitable style for this layout. As a result, I tried creating my own style. The issue I'm facing is that when the left button is hidden, the right button takes its place and appears at the far left instead of staying on the right side. I attempted setting order: 0 for the left button and order: 1 for the right button, but it didn't solve the problem.
.align-horizontal {
display: flex;
flex-direction: row;
justify-content: space-between;
}
Here is an example of the HTML structure:
<tr>
<td>
<div class='align-horizontal'>
<button>left</button>
<button style='display: none'>right</button>
</div>
</td>
</tr>
<tr>
<td>
<div class='align-horizontal'>
<button>left</button>
<button>right</button>
</div>
</td>
</tr>
<tr>
<td>
<div class='align-horizontal'>
<!-- This is where the issue occurs as the right button moves to the left -->
<button style='display: none'>left</button>
<button>right</button>
</div>
</td>
</tr>
If you have any suggestions or solutions on how I can ensure the right button always stays at the far right regardless of whether the left button is hidden or not, please let me know!