Read-only form alignment needs to be consistent - html

Question

I have a bit of an issue getting some of my form inputs to align well because they are read-only and hence do not take the same dimensions as the actual visible inputs. I've supplied two images to help you see:
UNALIGNED FORM SECTON
ALIGNED FORM SECTION
label[class="statlabel"] {
font-family: "Amaranth", sans-serif;
display: inline-block;
float: left;
width: 250px;
text-align: right;
padding-right: 10px;
clear: left;
padding-top: 15px;
}
.input CSS
.input {
font-size: 20px;
color: #5a5854;
background-color: #f2f2f2;
border: 1px solid #bdbdbd;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
padding: 5px 5px 5px 30px;
background-repeat: no-repeat;
background-position: 8px 9px;
display: inline-block;
margin-bottom: 10px;
text-indent: 15px;
width: 250px;
}
<a name="personalInfo"></a>
<h5 class="stath5"><span class="badge badge-secondary">2.</span> Please review your personal information</h5>
<EditForm Model="#Data.PersonalInfo" style="max-width:800px;" onkeydown="javascript: DisableEnterKey();">
<label id="fullNameLabel" class="statlabel" for="fullName">Full name:</label>
<span class="nameLabel"><label id="fullName">#Data.PersonalInfo.FullName</label></span>
<br />
<label id="statusLabel" class="statlabel" for="communityStatus">Spanish Lookout Community status:</label>
<span class="statuslabel"><label id="slcStatus">#Data.PersonalInfo.SLCStatus</label></span>
<br />
<label id="boxNumLabel" class="statlabel" for="boxNum">Box Number:</label>
<span class="boxLabel"><label id="boxNum">#Data.PersonalInfo.BoxNumber</label></span>
<br />
<div class="input-container">
<label class="statlabel" for="phone">Phone Number:</label>
<InputText type="tel" id="phone" class="input" #bind-Value="#Data.PersonalInfo.Phone" placeholder="What's your phone number?" />
</div>
<br /><hr class="statHR" />
<div class="input-container1">
<label class="statlabel" for="email">Email <span class="badge badge-success">Optional</span>:</label>
<InputText type="email" id="email" class="input" #bind-Value="#Data.PersonalInfo.Email" placeholder="What's your email address?" />
</div>
</EditForm>
</div>
To clarify, I want the first image to look like the second image. Any help would be invaluable. Thanks for your time!

Answer 1

this should get you started. Use Flex!
.row{
display:flex;
align-items:center;
border:solid black 1px;}
label{
width:25vw;}
EditForm{
display:flex;
flex-direction:column;
}
hr{
width:100%;}
<a name="personalInfo"></a>
<h5 class="stath5"><span class="badge badge-secondary">2.</span> Please review your personal information</h5>
<EditForm Model="#Data.PersonalInfo" style="max-width:800px;" onkeydown="javascript: DisableEnterKey();">
<div class='row'>
<label id="fullNameLabel" class="statlabel" for="fullName">Full name:</label>
<span class="nameLabel"><label id="fullName">#Data.PersonalInfo.FullName</label></span>
</div>
<div class='row'>
<label id="statusLabel" class="statlabel" for="communityStatus">Spanish Lookout Community status:</label>
<span class="statuslabel"><label id="slcStatus">#Data.PersonalInfo.SLCStatus</label></span>
</div>
<div class='row'>
<label id="boxNumLabel" class="statlabel" for="boxNum">Box Number:</label>
<span class="boxLabel"><label id="boxNum">#Data.PersonalInfo.BoxNumber</label></span>
</div>
<div class='row'>
<div class="input-container">
<label class="statlabel" for="phone">Phone Number:</label>
<input type="tel" id="phone" class="input" #bind-Value="#Data.PersonalInfo.Phone" placeholder="What's your phone number?" />
</div></div>
<div class='row'>
<hr class="statHR" />
</div>
<div class='row'>
<div class="input-container1">
<label class="statlabel" for="email">Email <span class="badge badge-success">Optional</span>:</label>
<input type="email" id="email" class="input" #bind-Value="#Data.PersonalInfo.Email" placeholder="What's your email address?" />
</div>
</div>
</EditForm>
</div>