I'm struggling to align two sections horizontally with varying content lengths, even when scaled. I attempted using display:flex in the .section part of my CSS, but it didn't yield the desired effect. Changing the flex direction also didn't work. Any suggestions on achieving this layout?
Here's my HTML:
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<div class="clearfix">
...
</div>
And here's my CSS:
.clearfix {
overflow: hidden;
}
section {
width: 40%;
min-height: 200px;
max-height: 2900px;
font-weight: bold;
text-transform: uppercase;
color: white;
font-family: sans-serif;
font-size: 30px;
padding: 5%;
text-align: center;
float: left;
}
.bodytype{
font-family: 'Poppins', sans-serif;
}
#title-one{
color: black;
font-size: 28pt;
}
.questions {
font-size: 16pt !important;
color:black;
}
...