How can I make contents of a single tag spaces between equally?

Question

This is a react.js app. I want my output to look like this:

but I am having this output:

I've tried text-indent and space-between in my css but it doesn't work.

Here's my HTML code:

Add Item for Repair Progress

        <div className="AddItemDiv">
          <span className="spanItem"> Ticket No: <strong>170</strong> </span> 
               <br/><br/>

              <span className="spanItem">
                 Issue: <strong>Cannot Login in Inventory System</strong>
              </span> 
               <br/><br/>

            <span className="spanItem"> Status:
             <select>
               <option selected value="">First Choice</option>
               <option value="">Second Choice</option>
               <option value="">Third Choice</option>
               <option value="">Fourth Choice</option>
             </select>
           </span>

         <br/><br/>
         <span className="spanItem"> PIC:
           <select>
           <option selected value="">First Choice</option>
           <option value="">Second Choice</option>
           <option value="">Third Choice</option>
           <option value="">Fourth Choice</option>
         </select>
       </span>
     <br/><br/>

     <span className="spanItem">
       Remarks: <input type="text" name="name" />
     </span>
  <br/>

Answer 1

You can use a grid system with a layout of 2 columns, also you can discard the usage of <br /> tags in this case, prefer to use the <br > tag when you have a text, phrase, poem, something that requires a line break in the text.

Here is a basic example with a grid system:

.ticket-form {
  max-width: 400px;
  display: grid;
  grid-template: auto / 150px 1fr;
  gap: 10px;
}

<div class="ticket-form">
    <label for="ticket-no">Ticket No:</label>
    <output id="ticket-no">170</output>

    <label for="issue">Issue:</label>
    <output id="issue">Cannot login in Inventory System</output>

    <label for="status">Status:</label>
    <select id="status">
        <option selected></option>
    </select>

    <label for="pic">PIC:</label>
    <select id="pic">
        <option selected></option>
    </select>

    <label for="remarks">Remarks:</label>
    <textarea id="remarks"></textarea>

    <label>Important</label>
    <div data-comment="multi elements in right">
        <div>if you have more that 1 element you must wrap with a div to mantain the grid flow</div>
        <div>or use another solution, the div wrapping the line with flex or something else</div>
    </div>
</div>

More information about grid here: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids

Below is a example using a div to wrap the line and a flex system to control the spacing inside it:

.input-wrapper {
    margin: 5px;
    display: flex;
    width: 400px;
}

/* use a fixed width label */
.input-wrapper label {
  width: 150px;
}

.input-wrapper textarea, 
.input-wrapper input,
.input-wrapper select {
  flex-grow: 1;
}

<div>
    <div class="input-wrapper">
        <label for="ticket-no">Ticket No:</label>
        <output id="ticket-no">170</output>
    </div>
    <div class="input-wrapper">
        <label for="issue">Issue:</label>
        <output id="issue">Cannot login in Inventory System</output>
    </div>
    <div class="input-wrapper">
        <label for="status">Status:</label>
        <select id="status">
            <option selected></option>
        </select>
    </div>
    <div class="input-wrapper">
        <label for="pic">PIC:</label>
        <select id="pic">
            <option selected></option>
        </select>
    </div>
    <div class="input-wrapper">
        <label for="remarks">Remarks:</label>
        <textarea id="remarks"></textarea>
    </div>
</div>

There are others solutions of course with a litle help of display: inline-block or float: left, personally I think that grid or flex are better choices.