Third div doesn't fill the space below the first one - html

Question

I have three divs with some content. On a wide screen they are all in one row. When I resize the screen, the following happens:
Screenshot
I want the bottom div to fill the space below the top one, like this Screenshot 2. Also on small screen all three divs should stack up in one column, so adding float:right to right div doesn't work. I'm doing it for email in web Outlook, so can't use media queries.
Here's the code
div {
display: inline-block;
font-size: 50px;
text-align: center;
color: white;
border: 2px solid black;
}
div {
background: red;
margin: 10px;
}
#top {
width: auto;
display: inline-block;
vertical-align: top;
}
#bottom {
width: auto;
display: inline-block;
vertical-align: top;
}
#right {
width: auto;
height: 200px;
display: inline-block;
vertical-align: top;
}
<div id="top">111111111111111111</div>
<div id="right">2222</div>
<div id="bottom">333333333333333</div>
Will be thankful for some advice on this situation.

Answer 1

Method1) use of % :
1) you must use of % instead of px for width and margin, for example:
div {
width: 30%;
//Other css...
}
2) use of word-break: break-all;
3) I remove width of ids and margin:10px(you can use of % for margin,i remove it because display:inline-block insert a margin automatically)
div {
display: inline-block;
font-size: 50px;
text-align: center;
color: white;
border: 2px solid black;
background: red;
width: 30%;
word-break: break-all;
}
#top {
display: inline-block;
vertical-align: top;
}
#bottom {
display: inline-block;
vertical-align: top;
}
#right {
height: 200px;
display: inline-block;
vertical-align: top;
}
<div id="top">111111111111111111</div>
<div id="right">2222</div>
<div id="bottom">333333333333333</div>
Method2) use of flex :
.wrapper {
display: flex;
flex-wrap: wrap;
}
div:not(.wrapper) {
font-size: 50px;
text-align: center;
color: white;
border: 2px solid black;
background: red;
word-break: break-all;
flex-grow: 1;
}
#top {
vertical-align: top;
}
#bottom {
vertical-align: top;
}
#right {
height: 200px;
vertical-align: top;
}
<div class="wrapper">
<div id="top">111111111111111111</div>
<div id="right">2222</div>
<div id="bottom">333333333333333</div>
</div>