opencart make radio buttons in row

Question

I have custom radio inputs for options on my opencart site. These options are with hidden inputs and are in div that will have border if option is selected.

here is code for 2 of these options:

label {
    width: 100%;
    height: 100%;
    display: block;
}

input[type="radio"] {
    position: absolute;
    top: 20px;
    left: 50%;
}

input[type="radio"]:checked + .squareBase {
    border: grey 2px solid;
    outline: black 3px solid;

}

.radio{
    width:50px;
}
.squareBase{
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
}
input{
display:none;
}

<div class="radio">
                                    <label>
                                      <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                                      <div class="squareBase accessible">XL</div>
                                    </label>
                                  </div>
                                  <div class="radio">
                                    <label>
                                      <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                                      <div class="squareBase accessible">XXL</div>
                                    </label>
                                  </div>

I want this options to be in row (not vertical). How can I do this?

Answer 1

You can contain both radio options inside a box and give it flex display which is displaying the box children in a row by default.

Just update your HTML with following code

<div class="options">
  <div class="radio">
    <label>
      <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
      <div class="squareBase accessible">XL</div>
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
      <div class="squareBase accessible">XXL</div>
    </label>
  </div>
 </div>

And Update you CSS with folling

label {
  width: 100%;
  height: 100%;
  display: block;
}

input[type="radio"] {
  position: absolute;
  top: 20px;
  left: 50%;
}

input[type="radio"]:checked + .squareBase {
  border: grey 2px solid;
  outline: black 3px solid;

}

.radio{
  width:50px;
}
.squareBase{
  width: 30px;
  height: 30px;
  margin-bottom: 10px;
}
input{
display:none;
}
.options{
  display: flex;
}