CSS 3rd div height based on 1st - reactjs

Question

I'm trying to find a right solution for stacking different height divs. Tried grid, flex and lastly inline-block.
From what i understand 3rd div(button) is attatched to the bottom of a 2nd div(image). I'm trying to make so it would be attatched to the bottom of a 1st div(text).
Button is being drawn as 3rd div is because button has to go under an image when window size gets too small. Can you even achive this with inline-block?
My current code:
https://jsfiddle.net/mep2x67L/16/
#container {
padding-top: 50px;
padding-bottom: 50px;
display: inline-block;
position: relative;
width: 100%;
height: 100%;
}
#desccription {
width: calc(50% - 20px);
margin-left: 20px;
display: inline-block;
vertical-align: top;
}
#desccription_Container {
margin: 0 auto;
justify-content: left;
text-align: left;
max-width: 560px;
margin-right: 10px;
}
#half_img {
width: 100%;
}
#img_container {
width: 49%;
display: inline-block;
}
.btnWrap {
display: inline-block;
width: 355px;
vertical-align: top;
text-align: center;
}
#normal_text {
font-size: 36px;
line-height: 42px;
color: #F1ECE3;
}
#btnWrap {
display: inline-block;
width: 355px;
vertical-align: top;
text-align: center;
}
<div id="container">
<div id="desccription">
<div id="desccription_Container">
<div id="normal_text"> hello hello </div>
</div>
</div>
<div id="img_container">
<img id="half_img" src="https://wallpapercave.com/wp/6K44j5E.jpg">
</div>
<div id="btnWrap">
<button type="button">Button!</button>
</div>
</div>

Answer 1

All you need to do is float your image div right - below I have commented the line I added. I have also added a clear fix and changed the width of the button wrap so it works on smaller screen sizes.
#container {
padding-top: 50px;
padding-bottom: 50px;
position: relative;
width: 100%;
height: 100%;
}
#container:after { /* clear fix */
content: '';
display: block;
height: 0;
overflow: hidden;
clear: both;
}
#desccription {
width: calc(50% - 20px);
margin-left: 20px;
display: inline-block;
vertical-align: top;
}
#desccription_Container {
margin: 0 auto;
justify-content: left;
text-align: left;
max-width: 560px;
margin-right: 10px;
}
#half_img {
width: 100%;
}
#img_container {
width: 49%;
display: inline-block;
float:right; /* add this */
}
#normal_text {
font-size: 36px;
line-height: 42px;
color: #F1ECE3;
}
#btnWrap {
width: calc(50% - 20px); /* I would make this the same size as desccription */
vertical-align: top;
text-align: center;
}
<div id="container">
<div id="desccription">
<div id="desccription_Container">
<div id="normal_text"> hello hello </div>
</div>
</div>
<div id="img_container">
<img id="half_img" src="https://wallpapercave.com/wp/6K44j5E.jpg">
</div>
<div id="btnWrap">
<button type="button">Button!</button>
</div>
</div>

Answer 2

You can use Grid - it's super easy, and you can control the position and grid layout with just media queries, etc. And it requires much less CSS when you learn how to use grid properly.
To learn about flexbox, I'd recommend this source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Similarly, to learn CSS grids, there is: https://css-tricks.com/snippets/css/complete-guide-grid/
It'll take about a day of your time, and you'll get a great grasp of how grids and flexbox work, helping you create better designs in the future.
For the current example, see the fiddle with CSS-grids:
https://jsfiddle.net/5u69aaun/
#container {
padding-top: 50px;
padding-bottom: 50px;
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr 1fr;
width: 100%;
height: 100%;
}
#description{
padding-left: 20px;
padding-right: 10px;
grid-row: 1;
grid-column: 1;
text-align: left;
}
#description_Container{
max-width: 560px;
}
#half_img {
width: 100%;
}
#img_container {
grid-row: 1 / 3;
grid-column: 2;
}
.btnWrap{
grid-row: 2;
grid-column: 1;
}
#normal_text{
font-size: 36px;
line-height: 42px;
color: red;
}
#btnWrap{
text-align: center;
}
<div id="container">
<div id="description">
<div id="description_Container">
<div id="normal_text"> hello hello </div>
</div>
</div>
<div id="img_container">
<img id="half_img" src="https://wallpapercave.com/wp/6K44j5E.jpg" >
</div>
<div id="btnWrap">
<button type="button">Button!</button>
</div>
</div>