html - How do I align the endpoints of my input-fields in form, using css? -

i making copy of pen-and-paper character sheet rpg, way of learning html/css. got stuck right @ beginning when trying style form, holding background information character.

currently i've managed make form of labels , input-fields picture left. pen-and-paper character sheet (and desired look) formatted 1 on right.

below code i'm using.

.sheet-character-background form input,  label {    margin-bottom: 10px;  }    .age-input {    width: 60px;  }

<div class="sheet-character">    <div class="sheet-character-background">      <form>        <label>name</label>        <input type="text" name="attr_name">        <br>        <label>race</label>        <input type="text" name="attr_race">        <br>        <label>gender</label>        <input class="gender-input" type="text" name="attr_gender">        <label>age</label>        <input class="age-input" type="number" name="attr_age" min="0">        <br>        <label>religion</label>        <input type="text" name="attr_religion">        <br>        <label>occupation</label>        <input type="text" name="attr_occupation">        <br>        <label>archetype</label>        <input type="text" name="attr_archetype">        <br>        <label>environment</label>        <input type="text" name="attr_environment">        <br>        <label>background</label>        <input type="text" name="attr_backgrund">      </form>    </div>  </div>

what steps going have want? played around surrounding each "row" <div> , class , setting width in css. didn't work out reverted initial version , got stuck.

many people suggest css framework, want can done simple css.

first, html consists of form series of rows, except 1 row consists of 2 fields in 1 row. modified html each row wrapped div class .form-row , delete <br> (let css rendering instead of using html tag):

to achieve want come down set width form, , how each row behave, , set width of input, , last override setting special case of .age-input.

this 'quick-and-dirty' way achieve want, provide ideas , suggestions in learning.

form {      width: 300px;  }  .form-row {      display:flex;  }  input {      width: 100%;  }  .age-input {      width: 60px;  }

<form>      <div class="form-row">          <label>name</label>          <input type="text" name="attr_name">      </div>      <div class="form-row">          <label>race</label>          <input type="text" name="attr_race">      </div>      <div class="form-row">          <label>gender</label>          <input type="text" name="attr_gender">          <label>age</label>          <input class="age-input" type="number" name="attr_age" min="0">      </div>      <div class="form-row">          <label>religion</label>          <input type="text" name="attr_religion">      </div>      <div class="form-row">          <label>occupation</label>          <input type="text" name="attr_occupation">      </div>      <div class="form-row">          <label>archetype</label>          <input type="text" name="attr_archetype">      </div>      <div class="form-row">          <label>environment</label>          <input type="text" name="attr_environment">      </div>      <div class="form-row">          <label>background</label>          <input type="text" name="attr_backgrund">      </div>  </form>