Excuse my lack of knowledge, but CSS is still new to me. I'm attempting to align two elements next to each other using display: table.
However, the element on the right seems to be lower than the one on the left, and I can't figure out why.
.container {
content: "";
display: table;
clear: both;
margin-left: 10%;
margin: 0 auto;
/* width: auto;
height: auto; */
vertical-align: middle;
border-radius: 5px;
border: 5px solid #ff656c;
height: auto;
padding: 0 20px;
width: inherit;
}
#column1 {
display: table-cell;
}
#column2 {
display: table-cell;
width: 50%;
}
#scope {
width: 100%;
padding-right: 5px;
}<div class="container">
<div id="column1">
<img id="scope" src="https://cdn.pixabay.com/photo/2018/07/08/19/59/blood-pressure-3524615_960_720.jpg">
</div>
<div id="column2">
<h2>Welcome to PATHFINDER</h2>
<p>For people with heart failure, GPs are crucial in initiating and optimising dosages of recommended medications
</p>
<p>The National Heart Foundation of Australia and the Cardiac Society of Australia and New Zealand published guidelines that outline the goal of pharmacological therapy for persons with heart failure with reduced ejection fraction (HFrEF), and how to
up-titrate these medicines.</p>
<p>PATHFINDER aims to provide assistance to GPs to identify the most appropriate medicines and dosages for each patient</p>
</div>
</div>I attempted applying the same code used for a form placed in two columns, and checked for any issues within the box model, but I'm really stumped by this..
Any guidance would be greatly appreciated!