Positioning div side by side with radio buttons (content switchers)

Question

I've created some radio buttons which work in my example as content switchers - https://jsfiddle.net/026tbk13/29/

<input type="radio" name="switch" id="card1switch" checked />
<label for="card1switch">Option 01</label>
<br/>
<input type="radio" name="switch" id="card2switch" />
<label for="card2switch">Option 02</label>
<br/>
<input type="radio" name="switch" id="card3switch" />
<label for="card3switch">Option 03</label>
<br/>
<input type="radio" name="switch" id="card4switch" />
<label for="card4switch">Option 04</label>

<div class="card" id="card1">
    <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p>
    <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p>
    <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p>
</div>

<div class="card" id="card2">
    <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p>
    <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p>
    <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p>
</div>

<div class="card" id="card3">
    <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p>
    <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p>
    <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p>
</div>

<div class="card" id="card4">
    <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p>
    <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p>
    <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p>
</div>

And CSS:

 .card{
   display: block;
   padding: 20px 0;
   display: none;
   margin: 20px 0 0;
   border-radius: 6px;
 }

 #card1switch:checked ~ #card1,
 #card2switch:checked ~ #card2,
 #card3switch:checked ~ #card3,
 #card4switch:checked ~ #card4{
   display: block;
 }

For now text is visible below radio buttons and what I'd like to achieve is to have it on the right (side by side with buttons).

Thanks a lot in advance for you help!

Regards, Roso

Answer 1

To get all cards to appear on the same row with the 1st option you can use wrap everything in a flexbox ( .container ) with direction of column and wrap behavior. Limit the height of the .container to make the cards appear on the 2nd column.

The column makes the radio button and the label appear on different rows. To prevent that, we'll hide the radio buttons, and create a custom radio button on the label using radial gradients.

 .containter { display: flex; flex-direction: column; height: 100px; flex-wrap: wrap; } .containter>input { position: absolute; left: -1000px; } .containter>input:checked + label { background: radial-gradient(circle at center, #666666 0, #666666 4px, #dedede 4px, #dedede 5px, #a6a6a6 5px, #a6a6a6 6px, transparent 6px) no-repeat; background-size: 12px 12px; background-position: 2px center; } .containter>label { padding: 0 0 0 20px; background: radial-gradient(circle at center, #dedede 0, #dedede 5px, #a6a6a6 5px, #a6a6a6 6px, transparent 6px) no-repeat; background-size: 12px 12px; background-position: 2px center; } .card { display: block; display: none; margin: 0 0 0 10px; border-radius: 6px; } .card>p { margin-top: 0; } #card1switch:checked~#card1, #card2switch:checked~#card2, #card3switch:checked~#card3, #card4switch:checked~#card4 { display: block; } 

 <div class="containter"> <input type="radio" name="switch" id="card1switch" checked /> <label for="card1switch">Option 01</label> <input type="radio" name="switch" id="card2switch" /> <label for="card2switch">Option 02</label> <input type="radio" name="switch" id="card3switch" /> <label for="card3switch">Option 03</label> <input type="radio" name="switch" id="card4switch" /> <label for="card4switch">Option 04</label> <div class="card" id="card1"> <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p> <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p> <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p> </div> <div class="card" id="card2"> <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p> <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p> <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p> </div> <div class="card" id="card3"> <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p> <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p> <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p> </div> <div class="card" id="card4"> <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p> <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p> <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p> </div> </div> 

Old answer :

To make each card appear to on the same row of the corresponding radio button, you can wrap each combination of input , label , and div in a flexbox (the .container element):

 .containter { display: flex; align-items: flex-start; margin: 0 0 10px; } .containter>input { margin: 1px 5px 0 0; } .card { display: block; display: none; margin: 0 0 0 10px; border-radius: 6px; } .card>p { margin: 0; } #card1switch:checked~#card1, #card2switch:checked~#card2, #card3switch:checked~#card3, #card4switch:checked~#card4 { display: block; } 

 <div class="containter"> <input type="radio" name="switch" id="card1switch" checked /> <label for="card1switch">Option 01</label> <div class="card" id="card1"> <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p> <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p> <p>Text_01 Text_01 Text_01 Text_01 Text_01 Text_01 Text_01</p> </div> </div> <div class="containter"> <input type="radio" name="switch" id="card2switch" /> <label for="card2switch">Option 02</label> <div class="card" id="card2"> <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p> <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p> <p>Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 Text_02 </p> </div> </div> <div class="containter"> <input type="radio" name="switch" id="card3switch" /> <label for="card3switch">Option 03</label> <div class="card" id="card3"> <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p> <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p> <p>Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 Text_03 </p> </div> </div> <div class="containter"> <input type="radio" name="switch" id="card4switch" /> <label for="card4switch">Option 04</label> <div class="card" id="card4"> <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p> <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p> <p>Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 Text_04 </p> </div> </div>