Fixing the Alignment of text and Article Images Using CSS - css

Question

I would like the text to line up nicely with the article-images to the right.
I expect that the .watch-listen-link will have to be altered in order to change align it the right way.
I have tried adding a top-margin property to the class with no results. What should I try next?
.article-side-image{
float: left;
width: 140px;
margin-left: 8px;
margin-right:4px;
margin-top: 8px;
}
.watch-listen-link {
text-decoration: none;
color: black;
font-weight: bold;
font-size: 18px;
}
.watch-listen-link:hover{
color: #1167a8;
}
.side-article {
float: right;
width: 250px;
position: relative;
top: -13px;
}
.no-border{
border-left: none;
padding: 0;
}
.border-right{
border-right: 1px solid #CCCCCC;
}
</style>
body section:
img class="article-side-image" src="images/article3.png">
<div class= "side-article">
<p><a class= "watch-listen-link" href=""> SpaceX rocket explodes during landing </a></p>
<p> <img class="clock" src="images/Clock-image.png"> <span class= "date border-right"> 19 January 2016 </span> <br> <a class="topic-link no-border" href=""> Science & Environment </a> </p>
</div>

Answer 1

What you're trying to build looks a lot like a media object. This pattern is used all over the web.
You probably don't want to use float for this. More recent additions such as CSS grid or Flexbox make creating media objects way, way easier.
I adapted the recipe from the article on media objects I mentioned earlier:
.media {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
grid-template-rows:1fr auto;
grid-template-areas:
"image content"
"image footer";
grid-gap: 20px;
margin-bottom: 4em;
}
.img {
grid-area: image;
}
.content {
grid-area: content;
}
<div class="media">
<div class="img">
<img src="https://mdn.github.io/css-examples/css-cookbook/balloon-sq2.jpg" alt="Balloons">
</div>
<div class="content">
<p>
<a>SpaceX rocket explodes during landing</a>
</p>
<p>
<img class="clock" src="images/Clock-image.png">
<span class= "date border-right"> 19 January 2016 </span> <br>
<a class="topic-link no-border" href=""> Science & Environment </a>
</p>
</div>