I can’t fully justify my input and label

Question

I’m a novice programmer who’s doing a project. I’m trying to set up a rpg-based website, where you can calculate the elements of your plug, and the system does this automatically for you, to avoid headaches and wasting time. But I cannot leave my inputs and Labels in the desired layout.

It would be more or less this, 2 columns and 4 lines, with all justified and touching the corners, including the 16,28 and 7 that are not touching the right corner. I also thought about making the inputs and Abels the same width, so that the "14" and "[+2C] Con (Constitution)" would not be so spacious in the div but I have no idea how to do it. =/

https://jsfiddle.net/vkdbxywf/

.div-pontos {
  background-color: white;
}

.form-pontos {
  background-color: blueviolet;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
}

<div class="div-pontos">
  <fieldset>
    <legend>Status</legend>
    <form class="form-pontos">

      <div>
        <input type="text" nome="str" id="str" placeholder="Força" value="22"><br>
        <label for="str">[ <span class="str">+6 A</span> ] Str (Força)</label>
      </div>

      <div class="agi">
        <input type="text" nome="agi" id="agi" placeholder="Agilidade" value="16"><br>
        <label for="agi">[ <span class="agi">+3 B</span> ] Agi (Agilidade)</label>
      </div>  

      <div class="con">
        <input type="text" nome="con" id="con" placeholder="Constituição" value="14"><br>
        <label for="con">[ <span class="con">+2 C</span> ] Con (Constituição)</label>
      </div>

      <div class="dex">
        <input type="text" nome="dex" id="dex" placeholder="Dextreza" value="28"><br>
        <label for="dex">[ <span class="dex">+9 S</span> ] Dex (Dextreza)</label>
      </div>

      <div class="cha">
        <input type="text" nome="cha" id="cha" placeholder="Carísma" value="1"><br>
        <label for="cha">[ <span class="cha">-5 E</span> ] Cha (Carísma)</label>
      </div>

      <div class="sab">
        <input type="text" nome="sab" id="sab" placeholder="Sabedoria" value="7"><br>
        <label for="sab">[ <span class="sab">-2 D</span> ] Sab (Sabedoria)</label>
      </div>

      <div class="mag">
        <input type="text" nome="mag" id="mag" placeholder="Magia" value="40"><br>
        <label for="mag">[ <span class="mag">+15 SS</span> ] Mag (Magia)</label>
      </div>

      <div class="status-calc">
        <button type="button" id="status-calc" onclick="console.log('Testando')">Reset </button>
      </div>

    </form><br><br>
  </fieldset>
</div>

Answer 1

I saw that you are using flex, so to split into 2 columns it is enough that each div is 50% wide.

Follow the image code above

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.div-pontos fieldset {
}
.div-pontos form {
    background-color: blueviolet;
    display: flex;
    flex-wrap: wrap;
}
.div-pontos form div {
    width: 50%;
    box-sizing: border-box;
    padding: 10px;
}
.div-pontos form div input,
.div-pontos form div label {
    width: 100%;
}

<div class="div-pontos">
    <fieldset>
        <legend>Status</legend>
        <form class="form-pontos">

            <div>
                <input type="text" nome="str" id="str" placeholder="Força" value="22"><br>
                <label for="str">[ <span class="str">+6 A</span> ] Str (Força)</label>
            </div>

            <div class="agi">
                <input type="text" nome="agi" id="agi" placeholder="Agilidade" value="16"><br>
                <label for="agi">[ <span class="agi">+3 B</span> ] Agi (Agilidade)</label>
            </div>

            <div class="con">
                <input type="text" nome="con" id="con" placeholder="Constituição" value="14"><br>
                <label for="con">[ <span class="con">+2 C</span> ] Con (Constituição)</label>
            </div>

            <div class="dex">
                <input type="text" nome="dex" id="dex" placeholder="Dextreza" value="28"><br>
                <label for="dex">[ <span class="dex">+9 S</span> ] Dex (Dextreza)</label>
            </div>

            <div class="cha">
                <input type="text" nome="cha" id="cha" placeholder="Carísma" value="1"><br>
                <label for="cha">[ <span class="cha">-5 E</span> ] Cha (Carísma)</label>
            </div>

            <div class="sab">
                <input type="text" nome="sab" id="sab" placeholder="Sabedoria" value="7"><br>
                <label for="sab">[ <span class="sab">-2 D</span> ] Sab (Sabedoria)</label>
            </div>

            <div class="mag">
                <input type="text" nome="mag" id="mag" placeholder="Magia" value="40"><br>
                <label for="mag">[ <span class="mag">+15 SS</span> ] Mag (Magia)</label>
            </div>

            <div class="status-calc">
                <button type="button" id="status-calc" onclick="console.log('Testando')">Reset </button>
            </div>

        </form><br><br>
    </fieldset>
</div>