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="radioQuesContainer row" data-view="widgets/dropDownSelect/view" data-active-view="true">
    <span class="quesHead col-md-5 col-xs-12" data-bind="text:que>stionText">This is a dummy text question</span>
   <div class="col-md-7">
       <textarea class="form-control"></textarea>
    </div>
    
                   
    </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;
}
.quesHead{
//  /* float: left; */
//  flex: 1;
  text-align: left;
}

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

.wrapper{
  white-space: normal;
}