Put a div at the right of another div - html

Question

How can put the div #box at the same height and 20px at the right of the div #mytext
HTML
<div id="mytext">This is a centered text</div>
<div id="box">
CSS
#mytext {
display: flex;
margin: 0 auto;
width: 450px;
height:280px;
border: 8px solid blue;
border-radius: 10px;
box-sizing: border-box;
outline:none;
resize:none;
font-size:45px;
font-weight:500;
text-align:center;
align-items:center;
background-color:white;
padding:10px;
}
#box {
display:inline-block;
width:90px;
height:280px;
background-color:dimgrey;
border-radius: 8px;
}
https://jsfiddle.net/fredericmarcel/kuv1m851/5/
Thank you for your help.

Answer 1

Wrap the elements and center them.
.wrapper {
text-align: center;
}
#mytext {
display: inline-flex; /* switched from 'flex' */
width: 450px;
height: 280px;
border: 8px solid blue;
border-radius: 10px;
box-sizing: border-box;
outline: none;
resize: none;
font-size: 45px;
font-weight: 500;
text-align: center;
align-items: center;
background-color: white;
padding: 10px;
}
#box {
display: inline-block;
vertical-align: top;
width: 90px;
height: 280px;
background-color: dimgrey;
border-radius: 8px;
}
<div class="wrapper">
<div id="mytext">This is a centered text</div>
<div id="box">
</div>

Answer 2

You can achieve this by wrapping the content in a div with display: flex. Updated fiddle
.container {
display: flex;
}
#mytext {
margin: 0 auto;
width: 450px;
height: 280px;
border: 8px solid blue;
border-radius: 10px;
box-sizing: border-box;
outline: none;
resize: none;
font-size: 45px;
font-weight: 500;
text-align: center;
align-items: center;
background-color: white;
padding: 10px;
}
#box {
display: inline-block;
width: 90px;
height: 280px;
background-color: dimgrey;
border-radius: 8px;
}
<div class="container">
<div id="mytext">This is a centered text</div>
<div id="box"></div>
</div>

Answer 3

If you want the grey box to be aligned 20px to the right you can use this. Note that the container has a set width. It also includes 8px to account for the blue border width:
#container {
background: #cc0000;
margin: 0 auto;
width: 568px;
}
#mytext {
display: flex;
float: left;
width: 450px;
height: 280px;
border: 8px solid blue;
border-radius: 10px;
box-sizing: border-box;
outline: none;
resize: none;
font-size: 45px;
font-weight: 500;
text-align: center;
align-items: center;
background-color: white;
padding: 10px;
}
#box {
float: right;
width: 90px;
height: 280px;
background-color: dimgrey;
border-radius: 8px;
}
<div id="container">
<div id="mytext">This is a centered text</div>
<div id="box"></div>
</div>

Answer 4

Use float:left; instead of display: flex; and display: inline-block;