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

Question

I am trying to create a layout according to the following, where the help text for the question is vertically aligned in the questions container.

My problem is how to expand the parent container when the help text exceeds the height of the question controls. In accordance with:

I know this because I use absolute positioning to vertically center the help text and therefore it is not included in the stream of the parent container. However, I am not sure about the best css solution for this problem.

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

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

jsfiddle

I would appreciate any advice on a better structure for this problem.

Answer 1

, div CSS.

, . display: table , display: table-cell. , , , vertical-align: middle.

. , position:relative; left:20px;, , ...

.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>