javascript - Aligning a group of radio button vertically and divide it if necessarely

Question

I have been looking for a solution for this problem but I couldn't find any in particular satisfying my request so it would be really cool if any of you can help!

The problem is that I have for example 7 radio buttons aligned vertically inside a DIV tag but I want to find a way (a JavaScript function for example) to divide them in two groups dynamically for example 4 buttons on the left side and the 3 left on the right.

For now, I just hard coded it by adding two other div child-tag inside the parent one and putted them beside each others, but this won't solve my problem!

For example, I have this code right now:

.radioButtonList{ 
	width: 300px;
    margin-left: 1px;
	margin-top: 15px;
}

.radioButtonListDevidedFirst{ 
	width: 100px;
    float: left;
    height: 300px;
}

.radioButtonListDevidedSecond{ 
	width: 200px;
    float: left;
    height: 300px;
}

<div class="radioButtonList">	
  <div class="radioButtonListDevidedFirst">
	  <div class="radioItem">
		<dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
		<label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
	  </div>
	  <div class="radioItem">
		<dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
		<label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
	  </div>
	  <div class="radioItem">
		<dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
		<label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
	  </div>
	  <div class="radioItem">
		<dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
		<label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
	  </div>
  </div>
					
  <div class="radioButtonListDevidedSecond">
	  <div class="radioItem">
		  <dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
		  <label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
	  </div>
	  <div class="radioItem">
		  <dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
		  <label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
	  </div>
	  <div class="radioItem">
		  <dspel:input type="radio" id="X" bean="Y" value="blue" checked="${CONDITION}"/>
		  <label for="value"><fmt:message key="keyExample" bundle="${myBundle}"/></label>
	  </div>
  </div>
					
</div>

Answer 1

Try CSS3 column-count

div {
  -webkit-column-count: 2;
  /* Chrome, Safari, Opera */
  -moz-column-count: 2;
  /* Firefox */
  column-count: 2;
}

<div>
  <input type="radio" name="group">Option 1
  <br>
  <input type="radio" name="group">Option 2
  <br>
  <input type="radio" name="group">Option 3
  <br>
  <input type="radio" name="group">Option 4
  <br>
  <input type="radio" name="group">Option 5
  <br>
  <input type="radio" name="group">Option 6
  <br>
  <input type="radio" name="group">Option 7
  <br>
  <div>