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><inputtype="radio"id="form-a-yes"name="form-a"><labelfor="form-a-yes">Yes</label><br><inputtype="radio"id="form-a-no"name="form-a"><labelfor="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;
}

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

.textAreaColumndivspan {
  display: block;
  flex-grow: 1;
}

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

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

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