Css table with scalable div on the sides - html

Question

I have a central div that have 4 others divs arrount it (top, right, left, bottom).
Top and Bottom divs are suposed to be fixed. They don't have to increase neither height nor width.
Right and left divs are ONLY suposed to increase its width.
How?
The "content" div (central) is a table that can have as many rows as the user wants. Then, I want to increase or decrease the height of the left and right divs depending on the height of the "content".
I want to automatically do that .
How can I do that?
I have created an example with what I have done, without success.
https://jsfiddle.net/y6ad2crg/4/
<div class="pantalla">
<div class=" pantallaSup"></div>
<div class="pantallaEsq"></div>
<div class="pantallaDre"></div>
<div class="interiorPantalla">
content<br>
aaa<br>
bbb<br>
ccc<br>
ddd<br>
eee
</div>
<div class="pantallaInf"></div>
</div>
The result I want to get is that:
What am I doing wrong?
Maybe just changing little things in css it may be done, or maybe my html is wrong designed...

Answer 1

change u code
https://jsfiddle.net/p7haf3oo/
.pantalla {
/*position: relative;*/
display: block;
width: 690px;
background-color: gray;
}
.pantallaSup {
height: 200px;
width: 100%;
background: orange;
}
.flex {
display: flex;
align-items: stretch;
}
.pantallaEsq {
width: 69.4px;
border-right: 4px solid black;
background: red;
display: block;
}
.pantallaDre {
width: 69.4px;
border-left: 4px solid black;
background: red;
display: block;
align-self: stretch;
min-height: 100px;
}
.pantallaInf {
height: 200px;
width: 100%;
background: orange;
}
.interiorPantalla {
position: relative;
margin: 0 auto;
border: 1px;
border-color: blue;
border-style: solid;
width: 550px;
background-color: white;
}
<div class="pantalla">
<div class="pantallaSup"></div>
<div class="flex">
<div class="pantallaEsq"></div>
<div class="interiorPantalla">
content
<br> aaa
<br> bbb
<br> ccc
<br> ddd
<br> eee
</div>
<div class="pantallaDre"></div>
</div>
<div class="pantallaInf"></div>
</div>

Answer 2

I believe I have coded what you're looking for -https://jsfiddle.net/Shuaso/vpmn3LLv/
I removed all the unnecessary divs and used CSS borders and background colors to achieve the same effect. You can alter the content in the "content" div and see the dynamic styles. Here's the code:
CSS:
.container {
width: 500px;
background-color: orange;
padding: 20px 0;
}
.content {
border-left: 20px solid red;
border-right: 20px solid green;
background-color: white;
}
HTML:
<div class="container">
<div class="content">
<p>test</p>
<p>test</p>
</div>
</div>