Placing divs side by side and adding elements in it [duplicate] - html

Question

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
I wanted to have 3 divs side by side in a HTML document and I managed to achieve it where it looks something like this:
But whenever I tried adding objects such as text or any other objects, the div is always shifting down:
Could anyone help me out on this?
Edit
Thanks for the response but i forgot that i wanted a logo at the top left, then followed by the 3 divs below the logo, but adding "flex" property to the container leads to this:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #fff;
}
.container {
width: 100%;
height: 100%;
display: flex;
border: 1px solid black;
}
.input {
width: 450px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-top: 5px;
margin-left: 5px;
display: inline-block;
}
.output {
width: 650px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
.output_2 {
width: 300px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
<!--
this is the outermost shell
-->
<div class="container">
<!-- to add a logo at the top left -->
<div class = "sun_lg">
<img src = "images/sun.png" height = "50">
</div>
<div class="input">
<p>Hi</p>
</div>
<div class="output">
</div>
<div class="output_2">
</div>
</div>

Answer 1

Just add display:flex to your container.
To learn more about flexbox read the documentation.
You can also use grid
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #fff;
}
.container {
width: 100%;
height: 100%;
border: 1px solid black;
display: flex;
flex-direction:column;
/* new */
}
.wrapper{
width: 100%;
height:auto;
display: flex;
}
.input {
width: 450px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-top: 5px;
margin-left: 5px;
}
.output {
width: 650px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
.output_2 {
width: 300px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
}
/* update for logo */
.sun_lg {
border: 1px solid #000;
flex: 1 1 100%;
}
<div class="container">
<!-- to add a logo at the top left -->
<div class="sun_lg">
<img src="https://via.placeholder.com/50x50" height="50">
</div>
<div class="wrapper">
<div class="input">
<p>Hi</p>
</div>
<div class="output">
</div>
<div class="output_2">
</div>
</div>
</div>

Answer 2

Define vertical-align to set the exact behavior of divs against texts baseline. I will use vertical-align:top in all child divs:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
background-color: #fff;
}
.container {
width: 100%;
height: 100%;
border: 1px solid black;
}
.input {
width: 450px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-top: 5px;
margin-left: 5px;
display: inline-block;
vertical-align:top;
}
.output {
width: 650px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
vertical-align:top;
}
.output_2 {
width: 300px;
height: 680px;
border-radius: 5px;
border: 3px solid black;
margin-left: 20px;
display: inline-block;
vertical-align:top;
}
<!--
this is the outermost shell
-->
<div class="container">
<div class="input">
<p>Hi</p>
</div>
<div class="output">
</div>
<div class="output_2">
</div>
</div>