How to Move Line to Be Nearest Top of the First Line - html

Question

I have code that display and contain 2 lines, and act like a Link.
I try to move the Second line to the nearest point at the top of the First line- but without success.
I try via margin-bottom:20px and margin-bottom:-20px ,but all it does, it covers the image with blue and not move close the Second line to the top first line.
How do i move it up?
Here's the HTML code:
<div class="elements-promo">
<div class="elements-promo__copy-wrapper">
<div class="elements-promo__content">
<a class="fill" href="example.com/">
<h2 class="elements-heading ">Top Ten Working Tools</h2>
<div class="elements-heading2">Best tools ever!</div>
</a>
</div>
</div>
</div>
Here's the CSS code:
.elements-heading2 {
color: #fff;
font-family: arial;
font-size: 20px;
}
.fill
{
display: block;
height: 90%;
width: 100%;
text-decoration: none;
}
h2
{
font-family: arial;
}
.elements-promo {
background-color: #f93d66;
background: linear-gradient(145deg, #4772d9, #5be0e0);
border-radius: 4px;
height: 62px;
}
.elements-promo__copy-wrapper {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
margin: 6px 0px;
background-position: 100% left top;
background-repeat: no-repeat;
max-height:60px;
}
#media (min-width:160px) {
.elements-promo__copy-wrapper {
background-image: url("//cdn.pbrd.co/images/HghWJ2p.png")
}
}
.elements-promo .elements-heading {
color: #fff;
padding-top:5px;
}
.elements-promo__content {
padding-right:15px;
text-align:right;
}
Here's a Live one: JSfiddle

Answer 1

This will work for you.
.elements-heading2 {
color: #fff;
font-family: arial;
font-size: 20px;
position: relative;
top: -19px;
}