Input field multiple want 1 input field go to the top right side how?

January 2, 2022

I got some problem i needed help i have created a page where there multiple font control however in my prototype design on right side that a field where input are in top and right position how can i do it

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 off as this is how my html page look like currently

So as u can see my price mode i have settle to make it at the right side however is there a way for this to go top of the page as what show in the prototype design ?

Prototype Design

>Solution :

I hope I understood what you want right.
You can simply create two columns by wrapping everything on the left in a div and wrapping what is on the right in another div and wrap both divs with another div with display flex

<div class="container">
<div>...here goes the content on the left...</div>
<div>...here goes the content on the right...</div>
</div>

.container{
   display:flex;/*This is the new style*/
}
.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="container"><!-- This is the container -->
<div><!-- This contains whats on the right -->
<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>
<div><!-- This contains whats on the left -->
<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>
</div>
</div>