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

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 >
  <label for="clickable">
     <div >price tag</div>
  </label>
  <div >       
    <div class ="tooltip-first">
      <h1 >BUY THIS</h1>
      <label for="closeCheck">
        <div >
                &#x2715;
        </div>
      </label>
    </div>
    <p > ON A SALE</p>
    <p > *BUY NOW</p>

  </div>
</div>

CodePudding user response：

You could use align-items:center, on .tooltip-first. But for this to work you need display:flex on it, and also remove those lines:

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

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;
  flex-direction: row;
  justify-content: space-between;
  align-items:center;
}
.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 {
  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 >
  <label for="clickable">
     <div >price tag</div>
  </label>
  <div >       
    <div class ="tooltip-first">
      <h1 >BUY THIS</h1>
      <label for="closeCheck">
        <div >
                &#x2715;
        </div>
      </label>
    </div>
    <p > ON A SALE</p>
    <p > *BUY NOW</p>

  </div>
</div>

CodePudding user response：

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 >
  <label for="clickable">
     <div >price tag</div>
  </label>
  <div >       
    <div class ="tooltip-first">
      <h1 >BUY THIS</h1>
      <label for="closeCheck" >
        <div >
                &#x2715;
        </div>
      </label>
    </div>
    <p > ON A SALE</p>
    <p > *BUY NOW</p>

  </div>
</div>