Currently, I am in the process of developing a web app using razor pages. My main focus is on the front end (*.cshtml) where I have integrated 4 objects, each consisting of a label and two inputs. My aim is to have all three components appear in line, with the labels of all 4 objects being of uniform length, along with the inputs. While I have managed to align the items in a row, I am struggling to ensure that the labels across the objects are the same length. Also, I am curious if it is possible to maintain uniform length and responsiveness simultaneously.
As of now, the view resembles the image linked here: image shows labels and inputs as uneven
Here is the current cshtml code:
<div class="input-group mb-3 container">
<div class="row">
<div clss="col">
@* Hub Country Field *@
<div class="row form-inline">
<label class="input-group-text" for="HubCountryID">HUB Country</label>
<select class="form-select" id="HubCountryID" onclick="GetHubCountryDesc()" asp-items="@(new SelectList(Model.HubCountries," ID ","HUBCountryID "))">
<option value="" selected disabled>-- Select HUB Country --</option>
</select>
<input class="form-control" type="text" id="HubCountryDescID" readonly />
</div>
@* Sales Region field *@
<div class="row form-inline">
<label class="input-group-text" for="SalesRegionID">Sales Region</label>
<select class="form-select" id="SalesRegionID" onclick="GetSalesRegionDesc()" asp-items="@(new SelectList(Model.Regions," ID ","RegionID "))">
<option value="" selected disabled>-- Select Region --</option>
</select>
<input class="form-control" type="text" id="SalesRegionDescID" readonly />
</div>
@* Market Channel Field *@
<div class="row form-inline">
<label class="input-group-text" for="MarketChannelToCustomerID">Market Channel to Customer</label>
<select class="form-select" id="MarketChannelToCustomerID" onclick="GetMarketChannelDesc()" asp-items="@(new SelectList(Model.MarketChannels," ID ","MarketChannelID "))">
<option value="" selected disabled>-- Select Market Channel --</option>
</select>
<input class="form-control" type="text" id="MarketChannelToCustomerDescID" readonly />
</div>
@* Market Segment Field *@
<div class="row form-inline">
<label class="input-group-text" for="MarketSegmentID">Market Segment</label>
<select class="form-select" id="MarketSegmentID" onclick="GetMarketSegmentDesc()" asp-items="@(new SelectList(Model.MarketSegments," ID ","MarketSegmentID "))">
<option value="" selected disabled>-- Select Market Segment --</option>
</select>
<input class="form-control" type="text" id="MarketSegmentDescID" readonly />
</div>