'How Can I Adjust HTML Formatting on the same line?

I am struggling to understand how I could get the words "Principle" next to the inputted box above. Essentially so that they are not on two lines.

Below is the HTML code for it, but should I be adjusting the CSS style sheet or something else instead of HTML?

<body>
   
    <main>
        <h1>PWA Loan Calculator</h1>
     <label for="boxPrincipal">Principal: </label>
      <input type="number" value="100000" id="boxPrincipal"/>
      Months:<input type="number" value="360" id="boxMonths"/>
      Annual Rate:<input type="number" value="6" id="boxAnnualRate"/>

      <button id="btnCreateLoan">Create Loan</button>

      <div class="card clsCardTemplate">         
      Payment:  <div class="divMonthlyPayment"> </div>
      Principal:<div class="divPrincipal"></div>
      Rate: <div class = "divAnnualRate" ></div>
        <button class = "btnShowSchedule">Show</button>
        <div class="Schedule Hidden"></div>
         </div>
         

      <div class="ScheduleLine clsLineTemplate">
       <div class="Balance child"><B>Balance</B></div> 
        <div class="Interest child"><B>Interest</B></div>
        <div class="Month child"><B>Month</B></div>
      </div>
      <div class="container"></div>
    </main>
    <script src="js/app.js"></script>
  </body>
</html>

enter image description here

htmlcss


Solution 1:[1]

The text must be inside the divs:

<div class="card clsCardTemplate">         
  <div class="divMonthlyPayment">Payment:</div>
  <div class="divPrincipal">Principal:</div>
  <div class = "divAnnualRate" >Rate:</div>
  <button class = "btnShowSchedule">Show</button>
  <div class="Schedule Hidden"></div>
</div>

Your CSS will determine the position.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Christian

Related Questions