My objective is to create a page consisting of multiple rows, each containing a label column, a control column, and an optional unit of measure column. I aim for the label column to be consistent across all rows, adjusting to fit the longest label. To achieve this, I am utilizing Bootstrap 4 as a support for my limited HTML expertise. While I have conducted some initial experiments, I suspect that using row and col classes may not be the most effective approach.
By aligning columns in this manner, resizing the browser window causes all columns to shrink even if there is ample white space available on the right side.
This alternative method results in fixed columns, where each label column has its own width and are not aligned with each other.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
<div class="container-fluid">
<div class="row">
<div class="col-sm-1">
Label
</div>
<div class="col-sm-1">
<input type="number" class="form-control">
</div>
<div class="col-sm-1">
min
</div>
</div>
<div class="row">
<div class="col-sm-1">
Longer Label
</div>
<div class="col-sm-1">
<button type="button" class="btn btn-primary">Primary</button>
</div>
<div class="col-sm-1">
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
<div class="container-fluid">
<div class="row">
<div class="col-auto">
Label
</div>
<div class="col-auto">
<input type="number" class="form-control">
</div>
<div class="col-auto">
min
</div>
</div>
<div class="row">
<div class="col-auto">
Longer Label
</div>
<div class="col-auto">
<button type="button" class="btn btn-primary">Primary</button>
</div>
<div class="col-auto">
</div>
</div>
</div>
Therefore, I am considering the use of jQuery to standardize the widths of all first columns, although I remain unsure if this is the optimal approach.