Using CSS to arrange divs within accordion structure

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.