Exact alignment of Radio buttons in Rows and Columns

Question

User351619809 posted

Hello All,

How do I align Radio buttons exactly in HORIZONTAL ROWS and at the same time exactly in VERTICAL COLUMNS .
I have to align radio buttons in three rows. The radio buttons are like so:

<div class="row">
  <div class="col-lg-12">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
      <label class="form-check-label" for="inlineRadio1">A</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
      <label class="form-check-label" for="inlineRadio2">B</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
      <label class="form-check-label" for="inlineRadio3"> cccc</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
      <label class="form-check-label" for="inlineRadio3">DDDDDDDDDDDDDDDDDDDDDD</label>
    </div>
  </div>

  <div class="col-lg-12">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
      <label class="form-check-label" for="inlineRadio1">XXXXXXXXXXXXXXXXXXX</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
      <label class="form-check-label" for="inlineRadio2">ssss</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
      <label class="form-check-label" for="inlineRadio3">rrrr </label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
      <label class="form-check-label" for="inlineRadio3">sdsdsd</label>
    </div>
  </div>
      <div class="col-lg-12">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
      <label class="form-check-label" for="inlineRadio1">jjjjjj</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
      <label class="form-check-label" for="inlineRadio2">jjjj</label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
      <label class="form-check-label" for="inlineRadio3">rtrtrtrtrtrtrtrtrt </label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3">
      <label class="form-check-label" for="inlineRadio3">hhhhhhhh</label>
    </div>
  </div>
        <div class="col-lg-12">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
      <label class="form-check-label" for="inlineRadio1">jjjjjj</label>
    </div>
    
  </div>
</div>

whenever the text is bigger, the radio buttons move to the right. If the text associated with radio button is shorter then radio buttons move to the left. I want them to be aligned properly in rows and columns.Below is my HTML:

any help will be highly appreciated.