Vertical alignment of child element that can expand the size of the parent container

Question

I am trying to create a layout as per the following, where the help text for a question is vertically aligned within the question container.

My problem is how to expand the parent container when the help text exceeds the height of the question controls. As per:

I know this is because I am using absolute positioning to vertically centre the help text and therefore it is not included in the flow of the parent container. However I'm not sure of the best css solution to this issue.

position: absolute;
top: 50%;
transform: translateY(-50%);

I have created the following fiddle to illustrate my existing solution / problem:

jsfiddle

I would appreciate any advice on the best structure for this problem.

Answer 1

Well, you cannot expand the parent container based on the absolutely positioned div only with CSS.

If your prior issue is vertically centering, I'd suggest you a different approach. You could turn your container to a display: table element, and make both the main content, and the tooltip act as display: table-cell. This way, you will be able to place it at the right side, in a more solid way, and vertical alignment will work with vertical-align: middle.

This will make your container fit the tooltip. Plus, I added the position:relative; left:20px; to misplace it a little to the right, as it was in your examples...

.cf:before,
.cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.cf:after {
  clear: both;
}

.container {
    position: relative;
    border: 1px #000 solid;
    display: table;
    margin-bottom: 50px;
}

.content, .text {
    display: table-cell;
    vertical-align: middle;
}

.text {    
    width: 22.5%;
}

.text > div {
    background-color: #ccc;
    margin: 5px;
    padding: 10px;
    position: relative;
    left: 20px;
}

<div class="container cf">
    <div class="content">
        This is the form content
    </div>
    <div class="text">
        <div>Some text that is smaller than the control height</div>
    </div>
</div>

<div class="container cf">
    <div class="content">
        This is the form content
    </div>
    <div class="text">
        <div>Some text that is bigger than the control height, some text that is bigger than the control height, some text that is bigger than the control height.
        </div>
    </div>
</div>