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

Solution 1:

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>