I am facing an issue with divs that are placed side by side inside a table.
These divs have been styled to appear as colored blocks.
Everything seems fine when the text within each div fits on two lines, however, if it overflows onto another line, the entire div shifts up one line. How can I prevent this from happening while maintaining the same width for the div and allowing the text to flow into the line below?
I have used line breaks in the text to ensure the gap remains when the text fits on one line, but I believe I will need to remove these eventually.
#main {
margin-top:15vw;
margin-left:5vw;
margin-right:5vw;
padding-right:3vw;
padding-left:3vw;
font-family:'Hind', sans-serif;
color:black;
text-align:center;
position:relative;
font-size:2vw;
z-index: 2;
background-color:white;
}
#green{
background-color: #f0f0df;
display: inline-block;
margin:1vw;
height: 8vw;
width: 12vw;
line-height: 3vw;
border-radius: 0.5vw;
}<div id=main>
<div id=green>Title 1<br><b>Answer 1</b></div><div id=green>Title 2 (long title)<br><b>Answer 2</b></div><div id=green>Title 3<br><b>Answer 3</b></div><p id="rep">Additional text goes here. This text needs to be here but is not important and so does not need a box of its own. It is styled with italics and smaller font, and will probably be ignored.</p>
</div>