javascript - how to make these two components appear on the same line? (textbox label and the textbox)

Question

this is my html file

 <div id="radioHeader">
    <div id="radioHeader" onclick="radioClicked()">

      <div class="radio form-check form-check-inline component"> Mode of Transaction<span
          style="color:red;">*</span>
        <div class="radiogq">
          <input type="radio" name="mode" value="cheque" onclick="" checked> Cheque
          <input type="radio" name="mode" value="bank"> Bank Transaction
        </div>
      </div>
      <div>
        <p id="idc"></p><input class="textb" type="text" id="fname" class="col-form-label input" placeholder="Registration Id"
          name="fname" size="100">

      </div>
    </div>
  </div>

this is my js file from where I am adding the value in the textbox, and I want them to be in the same line. this textbox label will chance as per the change in the radio button

  function radioClicked() {
  let shapeChoice = document.querySelector('input[name="mode"]:checked').value;

  switch (shapeChoice) {
    case 'cheque':
      document.getElementById("idc").innerHTML = "Enter your Cheque Id"
      break;

    case 'bank':
      document.getElementById("idc").innerHTML = "Enter your Transaction Id"
      break;



    default:
      doucment.getElementById("idc").innerHTML = "Default"
  }
};

radioClicked();

question from:https://stackoverflow.com/questions/65831654/how-to-make-these-two-components-appear-on-the-same-line-textbox-label-and-the

Answer 1

Use CSS, one of the ways is float:left

function radioClicked() {
  let shapeChoice = document.querySelector('input[name="mode"]:checked').value;

  switch (shapeChoice) {
    case 'cheque':
      document.getElementById("idc").innerHTML = "Enter your Cheque Id"
      break;

    case 'bank':
      document.getElementById("idc").innerHTML = "Enter your Transaction Id"
      break;



    default:
      doucment.getElementById("idc").innerHTML = "Default"
  }
};

radioClicked();

.cs1 {
    float:left;
}

<div id="radioHeader">


        <div class="radio form-check form-check-inline component" "> Mode of Transaction<span
            style="color:red;">*</span></div>



    <div id="radioHeader" onclick="radioClicked()">

        <div class="cs1 radiogq">
            <input type="radio" name="mode" value="cheque" onclick="" checked> Cheque
            <input type="radio" name="mode" value="bank"> Bank Transaction
        </div>
        
        
        
    </div>

    <div class='cs1'> &nbsp;&nbsp;</div>

            <div class='cs1' style="position:relative;top:2px;" id=idc></div>

    <div class='cs1'> &nbsp;&nbsp;</div>            
            
        <div class='cs1'>

            <input class="textb" type="text" id="fname" class="col-form-label input" placeholder="Registration Id"
                name="fname" style="width:200px;max-width:100%:">

        </div>
  
    </div>