How do I position these parts?

[jPaulB]

Hi Everybody,

<!--This section is a security stage: Vistor will see two randomly generated numbers
between 1 and 25 and be asked to input the sum of those two numbers-->
<div class="row">
    <div class="col-md-3 col-sm-6 spread">
        <h4>Question:</h4>
    </div>
    <div class="col-md-3 col-sm-6 displayBox" id="numericDisplay"></div>
    <script>
        var firstNumb = Math.floor(Math.random() * 25) + 1;
        var secondNumb = Math.floor(Math.random() * 25) + 1;
        var secretNumber = firstNumb + secondNumb;
        var display1 = document.getElementById("numericDisplay");
        display1.innerHTML = "<h5>"+firstNumb+" + "+secondNumb+"</h5>";
     </script>
    <div class="col-md-3 col-sm-6 spread">
        <h4>Answer:</h4>
    </div>
    <div class="col-md-3 col-sm-6">
        <input type="number" class="form-control" id="nEntry" name="nEntry" size="1" min="2" max="50" required="required">
    </div>
</div>

How do I adjust the "numericDisplay" to be closer to the Question label?
How do I adjust the "input type="number" to be closer to the Answer label?
I have no idea what attribute to play with.

 

[VBService]

Did you try like that ... col-md-2 ?

 <div class="col-md-2 col-sm-6 spread">
    <h4>Question:</h4>
  </div>

  <!-- ... the rest of the code ... -->

  <div class="col-md-2 col-sm-6 spread">
    <h4>Answer:</h4>
  </div>

 

[jPaulB]

Hi VBService,
I did try several different md-? but that attempt did not align the column elements the way I need.

I'll keep digging at it, and post the evenyual solution here.

Thanks Again ...

 

[VBService]

Did you try this way ...?
[ working code on-line ]

.row .spread {
  display: flex;
  gap: 1rem;
}

<div class="row">
  <div class="col-md-4 col-sm-6 spread">
    <h4>Question:</h4>
    <span class="displayBox" id="numericDisplay"></span>
  </div>

  <script>
    var firstNumb = Math.floor(Math.random() * 25) + 1;
    var secondNumb = Math.floor(Math.random() * 25) + 1;
    var secretNumber = firstNumb + secondNumb;
    var display1 = document.getElementById("numericDisplay");
    display1.innerHTML = "<h5>"+firstNumb+" + "+secondNumb+"</h5>";
  </script>
  <div class="col-md-4 col-sm-6 spread">
    <h4>Answer:</h4>
    <input type="number" class="form-control" id="nEntry" name="nEntry" size="1" min="2" max="50" required="required">
  </div>
</div>

 

[VBService]

I missed it in the post above because you have it written in javascript code:

display1.innerHTML = "<h5>"+firstNumb+" + "+secondNumb+"</h5>";

and that causes <h5> to be inside <span> in my entry and this is incorrect, check why.

I changed it to <div>
[ working code on-line ]

  <div class="col-md-4 col-sm-6 spread">
    <h4>Question:</h4>
    <div class="displayBox" id="numericDisplay"></div>
  </div>