How to Justify labels + input box to the right/left?

Question

I'm building a basic interest rate calculator but can't seem to get my inputs to display the way I want them to.

I'm brand new to HTML/CSS/Javascript and I feel heavily gated by lack of references so forgive me if any practices are a little outdated.

here is my base code for my entries:

<div class="entryform">
      <ul>

        <label for="int">Interest Rate: </label>
        <input type="number" id="InterestInput" name="int">
        <br>

        <label for="beg">Beginning Price: </label>
        <input type="number" id="BeginningPrice" name="beg">
        <br>

        <label for="end">Ending Price: </label>
        <input type="number" id="InterestInput" name="int">
        <br>

        <label for="int">n (days, months, years...): </label>
        <input type="number" id="InterestInput" name="int">

      </ul>
    </div>

Here is my css code:

.entryform {...}

I've tried justify-content, align-items, flex... I feel like I'm going crazy.

Sample visual of the website

I just want to make the inputs line up with eachother on the right side, Thank you so much for your time/help!

Answer 1

One possible solution:

Give the labels display: inline-block;

Give them a fixed width

Align text to the right

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}

<div class="entryform">
      <ul>

        <label for="int">Interest Rate: </label>
        <input type="number" id="InterestInput" name="int">
        <br>

        <label for="beg">Beginning Price: </label>
        <input type="number" id="BeginningPrice" name="beg">
        <br>

        <label for="end">Ending Price: </label>
        <input type="number" id="InterestInput" name="int">
        <br>

        <label for="int">n (days, months, years...): </label>
        <input type="number" id="InterestInput" name="int">

      </ul>
    </div>