JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

HTML

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<ul class="parentRadio  directionFlexColumn col-md-7 col-xs-6" data-bind="foreach:choiceLength">
        <li class="radioQuestionItems col-md-offset-4 col-md-6">
            <div class="radio-inline col-md-6">
                <input class="element" type="radio" data-bind="radioCheck: $data.selected, attr:{name:$parent.id}" name="0">
                <label class="wrapper" data-bind="text:$data.headerText">Worse now</label>
            </div>
        </li>
    
        <li class="radioQuestionItems col-md-offset-4 col-md-6">
            <div class="radio-inline col-md-6">
                <input class="element" type="radio" data-bind="radioCheck: $data.selected, attr:{name:$parent.id}" name="0">
                <label class="wrapper" data-bind="text:$data.headerText"></label>
            </div>
        </li>
    
        <li class="radioQuestionItems col-md-offset-4 col-md-6">
            <div class="radio-inline col-md-6">
                <input class="element" type="radio" data-bind="radioCheck: $data.selected, attr:{name:$parent.id}" name="0">
                <label class="wrapper" data-bind="text:$data.headerText"></label>
            </div>
        </li>
    
        <li class="radioQuestionItems col-md-offset-4 col-md-6">
            <div class="radio-inline col-md-6">
                <input class="element" type="radio" data-bind="radioCheck: $data.selected, attr:{name:$parent.id}" name="0">
                <label class="wrapper" data-bind="text:$data.headerText">Same</label>
            </div>
        </li>
    
        <li class="radioQuestionItems col-md-offset-4 col-md-6">
            <div class="radio-inline col-md-6">
                <input class="element" type="radio" data-bind="radioCheck: $data.selected, attr:{name:$parent.id}" name="0">
                <label...

CSS

.radioQuesContainer {
/* display: inline-block; */
height: 100%;
padding: 5px;
}
.quesHead {
text-align: left;
}
.directionFlexColumn {
flex-direction: column;
}
.parentRadio {
list-style: none;
/* float: right; */
display: flex;
justify-content: center;
}
.radioQuestionItems {
display: inline-block;
}
ul {
    column-count: 2;
    column-gap: 20px;
}