Using CSS to arrange divs within accordion structure - html

Question

Hi there, I am designing a questionnaire which is embedded into an Accordion widget structure. Originally, I started it using table for layout (I know, I know) which was ok.
Question text goes to accordion panel and user's guidance and responses go to accordion content area.
Now I would like get rid of table and use pure css, maintaining the same layout. The problem is - I cannot put two major blocks (div=Guidance and form=Response) together on the same line (flow does not help). I can move "Response" up to line it up with Guidance but only if I use negative top: -250px which seems wrong.
So, here is HTML for a single question:
<div id="Q08150"> <!-- BEGIN OF PANEL -->
<div class="Question">
<span class="QNumber">8.150</span>
<span class="QText">Question text</span>
</div>
</div> <!-- END OF PANEL -->
<div class="PanelContent"> <!-- BEGIN OF CONTENT -->
<div class="Guidance">
<p>Guidance text1</p>
<p>"Guidance text 2</p>
</div>
<form class="Response">
<div class="ResponseControls">
<label><input type="radio" name="RadioXXXX" value="Y" id="RXXXXY">Yes</label>
<label><input type="radio" name="RadioXXXX" value="N" id="RXXXXN">No</label>
<label><input type="radio" name="RadioXXXX" value="NS" id="RXXXXNS">Not Seen</label>
<label><input type="radio" name="RadioXXXX" value="NA" id="RXXXXNA">Not Applicable</label>
</div>
<div class="responseDetails">
<div class="Observation">
<label for="ObsXXXX">Observation:</label>
<textarea name="observation" id="ObsXXXX" rows="6" disabled></textarea>
</div>
<div class="DueDate">
<label for="DueDateXXXX">Due date:</label>
<input name="DueDate" class="DueDate_in" type="text" id="DueDateXXXX"/>
</div>
<div class="actions">
<label for="paXXXX">Actions required to correct and/or prevent this observation:</label>
<textarea name="actions" id="paXXXX" rows="6"></textarea>
</div>
</div> <!-- end of div class="responseDetails" -->
</form> <!-- end of class="Response" -->
</div> <!-- END OF CONTENT -->
and the following CSS
.Question {
width: 100%;
}
.PanelContent {
width:100%
}
.QNumber {
font-weight: bold;
}
.QText {
font-weight: bold;
padding-left: 20px;
}
.Guidance {
width:55%;
padding-right: 20px;
}
.Response {
position: relative;
left:60%;
width: 45%;
}
textarea[name="observation"] {
resize:none;
width: 530px}
textarea[name="actions"] {
resize:none;
width: 530px}
Now, because it is accordion - I cannot wrap the entire question in a div, otherwise it will not work; so I have to keep question and response parts separated.
The top picture is what I would like to have and lower one shows current look using table.
Thanks in advance!

Answer 1

Surely, set these two major "players" as below:
.Guidance {
position: absolute;
width:55%;
padding-right: 20px;
}
.Response {
position: relative;
width: 37%;
float: right;
position: absolute will do the trick.