Can you have 4 in line text area fields with a radio button and label above?

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:

QUESTION TEXTAREA LABEL RADIO BUTTON (yes/ no) TEXTAREA

The question at the top in bold aligned left
On the line below there would be 4 labels (currently sitting on top of the text area in the code)
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.

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.

See my HTML and CSS so far below

.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;
}

<div class="boxed">
<strong>Q1) Manager guidance when reviewing CSO feedback</strong>
</div>
<div class="textAreaColumn">
<div>
<span>Previous position</span>
<textarea placeholder="text"></textarea>
</div>
<div>
<span>Target set at last meeting</span>
<textarea placeholder="text"></textarea>
</div>
<div>
<span>Current position</span>
<textarea placeholder="text"></textarea>
</div>
<div>
<span>Target for next meeting</span>
<textarea placeholder="text"></textarea>
</div>
</div>

Solution

floatis for floating images within a paragraph only. Befor the introduction of flexbox and css-grid 2012 it was a hack for styling purpose. It remains a ahck which now is mis-used as it is unecessary. Unfortunatly many tutorials still keep teaching it instead of the use of flexbox and css-grid.Those are the more powerful and far better ways of styling as they are the right tools for it.

So as first step, delete the float property: .textAreaColumn div { float: left; }.

Then add: .textAreaColumn { display: flex; }. This will add flexbos to the container and all the divs within the container will have the same height and be displayed next to each other.

Next add: .textAreaColumn div { display: flex; flex-direction: column; }. this will align the items of the divs below each other.

Add radiobuttons with the use of a simple form like this:

<form>
  <input type="radio" id="form-a-yes" name="form-a">
  <label for="form-a-yes">Yes</label>
  <br>
  <input type="radio" id="form-a-no" name="form-a">
  <label for="form-a-no">No</label>
</form>

Last but not least add: .textAreaColumn din span { flex-grow: 1; } to consume all remaining space so everything is perfectly aligned.

.textAreaColumn {
  width: 100%;
  display: flex;
}

.textAreaColumn div {
  display: flex;
  flex-direction: column;
  width: 25%;
  border: 1px solid grey;
  padding: 10px;
  box-sizing: border-box;
}

.textAreaColumn div span {
  display: block;
  flex-grow: 1;
}

.textAreaColumn div textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid grey;
  min-height: 150px;
}

.boxed {
  border: 1px solid grey;
  padding: 10px;
}

<div class="boxed">
  <strong>Q1) Manager guidance when reviewing CSO feedback</strong>
</div>
<div class="textAreaColumn">
  <div>
    <span>Previous position</span>
    <form>
      <input type="radio" id="form-a-yes" name="form-a">
      <label for="form-a-yes">Yes</label>
      <br>
      <input type="radio" id="form-a-no" name="form-a">
      <label for="form-a-no">No</label>
    </form>
    <textarea placeholder="text"></textarea>
  </div>
  <div>
    <span>Target set at last meeting</span>
    <form>
      <input type="radio" id="form-b-yes" name="form-b">
      <label for="form-b-yes">Yes</label>
      <br>
      <input type="radio" id="form-b-no" name="form-b">
      <label for="form-b-no">No</label>
    </form>
    <textarea placeholder="text"></textarea>
  </div>
  <div>    
    <span>Current position</span>  
      <form>
      <input type="radio" id="form-c-yes" name="form-c">
      <label for="form-c-yes">Yes</label>
      <br>
      <input type="radio" id="form-c-no" name="form-c">
      <label for="form-c-no">No</label>
    </form>
    <textarea placeholder="text"></textarea>
  </div>
  <div>
    <span>Target for next meeting</span> 
    <form>
      <input type="radio" id="form-d-yes" name="form-d">
      <label for="form-d-yes">Yes</label>
      <br>
      <input type="radio" id="form-d-no" name="form-d">
      <label for="form-d-no">No</label>
    </form>
    <textarea placeholder="text"></textarea>
  </div>
</div>