title: Can you have 4 in line text area fields with a radio button and label above?
body: <p>I am a bit of a rookie and building a form to ask a series of questions. The idea is that a manual selection is made using a button and then text typed into a box. The display for the end user I am going for would look like the following:</p>
  <p>QUESTION
  TEXTAREA LABEL
  RADIO BUTTON (yes/ no)
  TEXTAREA</p>
  <ul>
  <li>The question at the top in bold aligned left</li>
  <li>On the line below there would be 4 labels (currently sitting on top of the text area in the code)</li>
  <li>On the line below this each textarea would have a radio button above it. The options would be 'yes' and 'no' in response to the question.</li>
  </ul>
  <p>I have made progress with 4 text area boxes inline and a label above. I just need to move the labels up, add a radio styled as a button (2 options - yes/ no) above the text area and expand the border so all this comes inside.</p>
  <p>See my HTML and CSS so far below</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.textAreaColumn{
  width:100%;
  }
  .textAreaColumn div{
  float:left;
  width:25%;
  border:1px solid grey;
  padding:10px;
  box-sizing: border-box;
  }
  .textAreaColumn div span{
  display:block;
  }
  .textAreaColumn div textarea{
  box-sizing: border-box;
  width:100%;
  border:1px solid grey;
  min-height:150px;
  }
  .boxed {
    border: 1px solid grey ;
    padding:10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="boxed"&gt;
  &lt;strong&gt;Q1) Manager guidance when reviewing CSO feedback&lt;/strong&gt;
  &lt;/div&gt;
  &lt;div class="textAreaColumn"&gt;
  &lt;div&gt;
  &lt;span&gt;Previous position&lt;/span&gt;
  &lt;textarea placeholder="text"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;span&gt;Target set at last meeting&lt;/span&gt;
  &lt;textarea placeholder="text"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;span&gt;Current position&lt;/span&gt;
  &lt;textarea placeholder="text"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;div&gt;
  &lt;span&gt;Target for next meeting&lt;/span&gt;
  &lt;textarea placeholder="text"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>