setting the height of div based on its sibling and its parent - html

Question

I would like to set a height of a second DIV based on the height of its sibling which comes above it and also the parent container which has both of these DIVs.
<div class="panel">
<div class="box-one">
<label>
<span class="label-text">Name:</span>
<input type="text" />
</label>
<label>
<span class="label-text">Description:</span>
<textarea name="" id="" cols="30" rows="5"></textarea>
</label>
</div>
<div class="box-two">
<div class="content">....</div>
</div>
</div>
Here is my SCSS code
.panel {
height: 300px;
border: solid 2px black;
background-color: #ccc;
display: table;
width: 50%;
padding: 20px;
}
.panel label {
display: block;
margin-bottom: 1em;
}
.panel label .label-text {
display: block;
}
.panel label input, .panel label textarea {
width: 90%;
}
.panel .box-one, .panel .box-two {
display: table-row;
}
.panel .box-two {
height: 100%;
border: solid 2px black;
overflow: auto;
background-color: #fff;
padding: 10px;
box-sizing: border-box;
}
.panel .box-two .content {
height: 100%;
overflow: auto;
}
Some how I kind of figured a solution with this CSS tables approach, but is there a better approach rather than this? Because this approach needs addtional DIVs to be wrapped around it.
Here is my codepen
http://codepen.io/nirmalkc/pen/jPRWKK?editors=110
BTW, I dont want to go with any javascript based approach.
If anyone, has an alternate for the above with a better apporach, that will be great.

Answer 1

flexbox can do that.
.panel {
height: 300px;
width: 50%;
margin: 10px auto;
border: 1px solid grey;
display: flex;
flex-direction: column;
}
.panel [class*="box"] {
flex: 1 0 auto;
}
.box-one {
background: lightblue;
}
.box-two {
background: lightgreen;
border-top: 1px solid red;
}
.tall {
height: 200px;
}
<div class="panel">
<div class="box-one">
</div>
<div class="box-two">
</div>
</div>
<div class="panel">
<div class="box-one tall">
</div>
<div class="box-two">
</div>
</div>