This is the image referencI am using Display:Inline-Block; property to maintain all the boxes in one line. Now, with no text, it is working fine but after adding text to those boxes, the position automatically changes along with the text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real Website</title>
<Style>
* {
margin: 0px;
padding: 0px;
box-sizing: border-boxS;
}
.container {
border: 2px solid black;
height: 200px;
}
.box {
height: 150px;
width: 150px;
border: 2px solid red;
display: inline-block;
}
</Style>
</head>
<body>
<div class="container">
<div class="box">Very Very long paragraph </div>
<div class="box"> Short Para</div>
<div class="box">paragraph</div>
<div class="box"></div>
<div class="box">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt, animi quas. Aliquam,
consectetur earum atque rerum repellendus officia nesciunt aut./div>
</div>
</body>
</html>