Aligning text to right without shifting position - html

Question

I have an example of form draft in Microsoft Word as shown:
and I'm trying to recreate this form as a web page via HTML but I'm having issues with getting the textbox label alignment to be exactly like the one in the draft which is somewhat "right" aligned, followed by the textbox.
When I added the HTML elements it is currently as so:
However I'm trying to achieved the "right" alignment of the labels like the draft above, so I tried using the "text-align: right" function in css but this is what I got instead.
It achieves what I wanted which is for the label to be right aligned but everything got shifted to the right at the end of the div, which means if I were to want the fields to be sort of positioned somewhat left like the draft, does this mean that I would have to move each individual element via the "left" positioning attribute in css? Is there any more efficient way I could use for this?
* {
margin: 0;
padding: 0;
}
.outer_frame {
position: relative;
border: 1px solid black;
}
.inner_frame {
border: 1px solid black;
height: 600px;
width: 700px;
text-align: right;
}
<div class="outer_frame">
<div class="inner_frame">
<div class="entry">
<label id="name">Name</label>
<input type="text" id="name_in" disabled class="field">
</div>
<div class="entry">
<label id="addr">Address</label>
<input type="text" id="addr_in" disabled class="field">
</div>
<div class="entry">
<label id="tel">TelephoneNumber</label>
<input type="text" id="tel_in" disabled class="field">
</div>
<div class="entry">
<label id="iden">Identity Number</label>
<input type="text" id="identity_in" disabled class="field">
</div>
<div class="entry">
<label id="cpny">Company</label>
<input type="text" id="com_in" disabled class="field">
</div>
<div class="entry">
<label id="job">Job Title</label>
<input type="text" id="job_in" disabled class="field">
</div>
</div>
</div>

Answer 1

make your labels inline block, give them a width (as large as the largest text) and then align them right:
label {
display: inline-block;
width: 7.75em;
text-align: right;
margin-right: 2em;
}
<div class="entry">
<label id="name">Name</label>
<input type="text" id="name_in" disabled class="field">
</div>
<div class="entry">
<label id="addr">Address</label>
<input type="text" id="addr_in" disabled class="field">
</div>
<div class="entry">
<label id="tel">TelephoneNumber</label>
<input type="text" id="tel_in" disabled class="field">
</div>
<div class="entry">
<label id="iden">Identity Number</label>
<input type="text" id="identity_in" disabled class="field">
</div>
<div class="entry">
<label id="cpny">Company</label>
<input type="text" id="com_in" disabled class="field">
</div>
<div class="entry">
<label id="job">Job Title</label>
<input type="text" id="job_in" disabled class="field">
</div>

Answer 2

Add margin: auto to .inner_frame if you want it to take the size of the content and add the code below to adjust the lines
.inner_frame{ margin:auto }
.entry{
display:flex
justify-content: space-between;
margin:1em
}

Answer 3

You can fix the width of your labels and then align them to the right:
.entry label {
display: inline-block;
width: 200px;
text-align: right;
margin-right: 10px;
}

Answer 4

Adding the below definition to your inner-frame class will fix the issue
margin:auto; //will center the div
if you need to align it to a different area, use exact values to the margin
margin: 10px 50px 20px 0;
Read more on the topic on the MDN site