JSFiddle - React, Tailwind, and code Playground

by Himanshu Joshi

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="btn-group radioQuesContainer row" data-view="widgets/dropDownSelect/view" data-active-view="true">
    <span class="quesHead col-md-5 col-xs-12" data-bind="text:questionText">Managing costs and resources in your ? Is it …</span>
    <button class="btn dropdown-toggle" data-toggle="dropdown">  <span class="caret"></span></button>
    <ul class="dropdown-menu" data-bind="foreach:choiceLength">
        <li>
            <a href="#" class="wrapper" data-bind="text:$data.headerText"></a>
        </li>
    
        <li>
            <a href="#" class="wrapper" data-bind="text:$data.headerText">worse now</a>
        </li>
    
        <li>
            <a href="#" class="wrapper" data-bind="text:$data.headerText"></a>
        </li>
    
        <li>
            <a href="#" class="wrapper" data-bind="text:$data.headerText"></a>
        </li>
    
        <li>
            <a href="#" class="wrapper" data-bind="text:$data.headerText">SAME</a>
        </li>
    
        <li>
            <a href="#" class="wrapper" data-bind="text:$data.headerText"></a>
        </li>
    
        <li>
            <a href="#" class="wrapper" data-bind="text:$data.headerText"></a>
        </li>
    
        <li>
            <a href="#" class="wrapper" data-bind="text:$data.headerText">Better Now</a>
        </li>
    </ul>
</div>

CSS

.parentHeader{
  //border: 3px solid black;
  //background-color: grey;
  overflow: hidden;
  display: flex;
  padding: 15px;
  justify-content: center;
}
.itemsHeader{
  //flex:1;
  //flex-grow:1;
  border: 1px solid #ffffff;
  list-style:none;
  padding:0;
  background-color: #EAEBEE;
  padding: 10px 5px 5px 1px;
}

.parentRadio{
  list-style: none;
  /* float: right; */
  display: flex;
  justify-content: center;
}

.radioQuestionItems{
  display:inline-block;
  //height: 100;
}
.radioQuesContainer{
  /* display: inline-block; */
  height: 100%;
/*  flex: 1;
  display: flex;
  flex-direction: row;*/
  padding: 5px;
    width:100%;
}
.quesHead{
//  /* float: left; */
//  flex: 1;
  text-align: left;
}

.radioQuesContainer:nth-of-type(odd) {
  background: #e0e0e0;
}

.wrapper{
  white-space: normal;
}