How to align horizontally a h1 and a label in one div?

Issue

I'm trying to align two elements in one line horizontally. Currently, the close button (X) is slightly above the first line of text "BUY THIS" even though they are in the same div and I set flex-direction:row and justify-content :space-between. I want to align them so that they are in the same line horizontally. Here is a JSFiddle and my code below:

var dialog= document.querySelector(".tooltip-content");
var openBtn =  document.querySelector(".price-line");
var closeBtn = document.querySelector(".close");

openBtn.addEventListener("click",()=>{
dialog.style.display ="block";
});

closeBtn.addEventListener("click",()=>{
dialog.style.display ="none";
})

.close{
  font-size:13px;
}

.price-line{
  font-weight: 400;
  font-size: 10px;
  line-height: 20px;
}
.tooltip-first{
  flex-direction: row;
  justify-content: space-between;
}
.tooltip-title {
  font-weight: 700;
  font-size: 10px;
  line-height: 20px;
}
.tooltip-msg{
  font-weight: 400;
  font-size: 10px;
  line-height: 20px;
}

.tooltip-footer {
  font-weight: 400;
  font-size: 5px;
  line-height: 12px;
}

.tooltip .close{
  position: absolute;
  top: 5px;
  right: 5px;
}

.tooltip {
  text-align: right;
  position: relative;
  display: block;
}

.tooltip .tooltip-content {
/*   display:none;
   */  
  width: 500px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 10px;

  position: absolute;
  z-index: 1;
}



.tooltip .tooltip-content::after {
  content: " ";
  position: absolute;
  border-style: solid;
  border-width: 5px;
}

.tooltip .tooltip-content {
  width: 200px;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltip-content::after {
  top: 100%;
  left: 90%;
  margin-left: -5px;
  border-color: black transparent transparent transparent;
}

<div style="height: 300px">

</div>

<div class="tooltip">
  <label for="clickable">
     <div class="price-line">price tag</div>
  </label>
  <div class="tooltip-content">       
    <div class ="tooltip-first">
      <h1 class="tooltip-title">BUY THIS</h1>
      <label for="closeCheck">
        <div class="close">
                &#x2715;
        </div>
      </label>
    </div>
    <p class="tooltip-msg"> ON A SALE</p>
    <p class="tooltip-footer"> *BUY NOW</p>

  </div>
</div>

Solution

Is that what you are looking for?

var dialog= document.querySelector(".tooltip-content");
var openBtn =  document.querySelector(".price-line");
var closeBtn = document.querySelector(".close");

openBtn.addEventListener("click",()=>{
dialog.style.display ="block";
});
closeBtn.addEventListener("click",()=>{
dialog.style.display ="none";
})

.close{
  font-size:13px;
}

.price-line{
  font-weight: 400;
  font-size: 10px;
  line-height: 20px;
}
.tooltip-first{
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}
.tooltip-title {
  font-weight: 700;
  font-size: 10px;
  line-height: 20px;
  margin: 0;
}
.tooltip-msg{
  font-weight: 400;
  font-size: 10px;
  line-height: 20px;
}

.tooltip-footer {
  font-weight: 400;
  font-size: 5px;
  line-height: 12px;
}

.tooltip .close-container {
  display: block;
}

/* .tooltip .close{
  position: absolute;
  top: 5px;
  right: 5px;
} */

.tooltip {
  text-align: right;
  position: relative;
  display: block;
}

.tooltip .tooltip-content {
/*   display:none;
   */  
  width: 500px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 10px;

  position: absolute;
  z-index: 1;
}



.tooltip .tooltip-content::after {
  content: " ";
  position: absolute;
  border-style: solid;
  border-width: 5px;
}

.tooltip .tooltip-content {
  width: 200px;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltip-content::after {
  top: 100%;
  left: 90%;
  margin-left: -5px;
  border-color: black transparent transparent transparent;
}

<div style="height: 300px">

</div>

<div class="tooltip">
  <label for="clickable">
     <div class="price-line">price tag</div>
  </label>
  <div class="tooltip-content">       
    <div class ="tooltip-first">
      <h1 class="tooltip-title">BUY THIS</h1>
      <label for="closeCheck" class="close-container">
        <div class="close">
                &#x2715;
        </div>
      </label>
    </div>
    <p class="tooltip-msg"> ON A SALE</p>
    <p class="tooltip-footer"> *BUY NOW</p>

  </div>
</div>

Answered By - Mina