Expand Inner div height to meet the outer div height - html

Question

I want to change the inner div height according to the outer div.
In my case I have two inner divs one with fixed height and the outer div expands its heigh according to that (I use 'clearfix' there). But I need the other inner div also change its height to the outer div height
height : 100%; did not work.
This is a JsFiddle link to show my problem.
https://jsfiddle.net/qjsqxk7j/18/
HTML ->
<div class="outer clearfix">
<div class="col-xs-3 left">
</div>
<div class="col-xs-9 right">
<div class="inner">
<label>sssss</label>
<button class="btn-default">
sss
</button>
</div>
</div>
CSS ->
.right {
height: 100%;
background-color: blue;
}
.left {
height: 200px;
background-color: red;
}
.inner{
position: relative;
top: 50%;
transform: translateY(-50%)
}
.outer {
background-color: yellow;
position: relative;
max-width : 500px;
}
Actually I want the Blue div take all the yellow space left and the button and label comes to its vertical centre.
(I want my outer div to get one of its inner div height and changed accordingly.And then when the outer div height changes the other inner div also has to change its height. But it won't.)

Answer 1

Try below code and yes I have remove clearflex from parent element as it clear float for both child element. This increase and decrease it's hide when child element height increase and vise versa i.e. same for parent element.
.outer{
width:100%;
height:auto;
background:yellow;
position:relative;
border-bottom:1px solid #111;
display:table;
}
.outer > .right{
width:50%;
height:auto;
background:red;
float:left;
word-break : break-all;
}
.outer > .left{
width:50%;
height:auto;
background:blue;
float:left;
}

Answer 2

see here jsfiddle
i used display:table-cell on the 2 columns ( left and right ) and display:table to .outer . for this to work you need to overwrite the float:left from the columns given by bootstrap
code added
.left,.right {
display:table-cell;
float:none;
vertical-align:middle;
}
.outer {
display: table;
}
or with a little JQ : jsfiddle
code :
var hgt = $(".outer").height()
$(".left").height(hgt)
let me know if this was what you were looking for

Answer 3

change some css Remove your Comment code
.right {
height: 200px;
background-color: red;
}
.left {
height: 100%;
background-color: blue;
}
.inner{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.outer {
background-color: yellow;
position: relative;
max-width : 500px;
height:200px;
}
https://jsfiddle.net/qjsqxk7j/25/