As a CSS newbie, I am trying to create boxes with headers that have a little gap before the heart image, no matter the box size. Here is what I have attempted so far:
https://i.sstatic.net/AQfib.png
This is my current HTML code:
<div class="block">
<p><em>04-05</em></p>
<img class="block_pic" src="..."/>
</div>
Here's the CSS I've been working on:
.block {
border: solid red;
width:250px;
height:150px;
}
p{
border-bottom:solid black 2px;
width:83%;
margin:5px;
}
.block_pic {
width:30px;
position:absolute;
top: 5.5%;
right:86.5%;
}
You can view my progress and approach on CodePen. While my method involved trial and error with adjusting positioning numbers, I am curious if there is a smarter way to position the heart image without this guesswork. Any tips for creating responsive boxes of varying sizes would be greatly appreciated!