JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">

<div class="flex">
<input id="q1" name="answer" type="radio" value="<?php echo $key[0]; ?>">
<label for="q1">Test 1<br>Next Line<?php echo $value[0]; ?></label>
<input id="q2" name="answer" type="radio" value="<?php echo $key[1]; ?>">
<label for="q2">Test 2<?php echo $value[1]; ?></label>
<input id="q3" name="answer" type="radio" value="<?php echo $key[2]; ?>">
<label for="q3">Test 3<?php echo $value[2]; ?></label>
<input id="q4" name="answer" type="radio" value="<?php echo $key[3]; ?>">
<label for="q4">Test 4<?php echo $value[3]; ?></label>
</div>

</div>

CSS

body {margin:0;}

.container {max-width:800px;margin:auto;}

.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch;
}

.flex label {box-sizing: border-box;background-color:#eeeeee;border:1px solid #cccccc;padding:10px;width: calc(50% - 4px);margin: 2px;}

.flex input[type="radio"] {opacity: 0;position: fixed;width: 0;}
  
.flex input[type="radio"]:checked + label {background-color:#eefefe;}

.flex input[type="radio"]:focus + label {}

.flex label:hover {background-color: #F5F5F5;}


@media only screen and (max-width: 480px) {
.flex label {width:100%;}
}