How can I simply display the h3 tag and p tag on separate lines, with the h3 tag on the top?
This code is part of a bigger project and I know there are other ways of positioning elements in the centre on separate lines, but I don't want to have to affect its parent elements (of the bigger project) and want to use a simpler flex box.
.hover-over-windows-style {
height: 100%;
background: red;
/* Fails because h3 and p tags are not on separate lines */
display: flex;
align-items: center;
/* padding-top of 25% nearly works but content isnt in centre of parent div */
}
#parent {
height: 300px;
width: 300px;
}<div id="parent">
<div class="hover-over-windows-style">
<h3><a href="matches/blitz.html">H3 Tag on top</a></h3>
<p>Paragraph here should be below the H3 tag, on a separate line. Not sure how to get this done. Setting 100% widths don't work and cannot display as block elements.</p>
</div>
</div>