I am facing an issue and need some assistance. I have created a page with multiple font controls, but in my prototype design, there is a field on the right side where the inputs are positioned at the top and on the right. How can I achieve this?
I have created a snippet to test it out:
.StyleForm {
margin-top: 230px;
padding-left: 50px;
}
.StyleFormRest {
padding-left: 50px;
}
.StyleFormRestRight {
text-align: right;
padding-right: 500px;
margin-bottom: 5px;
align-items: right;
}
#EmailDisplay,
#AddressDisplay,
#DescriptionDisplay {
width: 875px;
}
.createMargin {
margin-bottom: 15px;
}
.Email,
.ContactName,
.ContactNo,
.Address,
.Description {
font-size: 18px;
}
#PriceModeDisplay {
text-align: right;
}
.StyleFormRestRight .form-control {
display: inline-block;
}<div class="mb-3 StyleForm">
<label for="Email" class="form-label"><b class="Email">Email</b></label>
<input type="email" class="col-6 form-control" id="EmailDisplay" disabled readonly>
</div>
<form class="row g-3 StyleFormRest">
<div class="col-4">
<label for="Contact Name" class="visually-hidden"><b class="ContactName">Contact Name</b></label>
<input type="text" class="form-control" id="ContactNameDisplay" disabled readonly>
</div>
<div class="col-2 createMargin">
<label for="Contact No" class="visually-hidden"><b class="ContactNo">Contact No.</b></label>
<input type="text" class="form-control" id="ContactNoDisplay" disabled readonly>
</div>
</form>
<div class="mb-3 StyleFormRest">
<label for="Address" class="form-label"><b class="Address">Address</b></label>
<input type="text" class="col-6 form-control" id="AddressDisplay" disabled readonly>
</div>
<div class="mb-3 StyleFormRest">
<label for="Description" class="form-label"><b class="Description">Description</b></label>
<textarea class="form-control" id="DescriptionDisplay" rows="3" disabled readonly></textarea>
</div>
<div class="mb-3 StyleFormRestRight">
<label for="PriceMode" class="form-label"><b class="PriceMode">Price Mode</b></label>
<input type="text" class="col-2 form-control pull-right" id="PriceModeDisplay" disabled readonly>
</div>My snippet is showing something different from how my current HTML page looks like: https://i.sstatic.net/3bYn2.png
As you can see, the price mode is positioned on the right side. Is there a way to move it to the top of the page as shown in the prototype design?
Prototype Design: https://i.sstatic.net/wFvFe.png