I've been trying to figure out the best way to align these two items. When you view the code snippet, you'll notice that 'Newsletter' is slightly lower than 'Resources'. Both are supposed to be aligned both vertically and horizontally, but for some reason, they're not on the same line.
* {
margin: 0;
padding: 0;
}
.footer {
width: 100%;
height: 150px;
background-color: #6D7B8D;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: row;
} <footer>
<div class="footer">
<div class="col">
<p class="coltitle">Resources</p>
<ul class="footer-links">
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
<li><a href="/">Link</a></li>
</ul>
</div>
<div class="col">
<p class="coltitle">Newletter</p>
<ul class="footer-links">
<li>
<form action="#" method="post">
<input type="email" name="email" placeholder="Subscribe" maxlength="80" required />
</form>
</li>
</ul>
</div>
</div>
</footer>