Выровнять блоки относительно друг друга CSS

Question

Не получается выровнять блоки. Нужно, чтобы EXPLORE ALL был в правой стороне и первый блок был подчёркнут.

Это не получается сделать, так как, чтобы он был подчёркнут нужно задать высоту блоку .first-tab-controll, но после этого блок .btn-ghost-exploreAll съезжает вниз:

.featured-product{
    width:1171px;
    height:369px;
    margin:120px auto;
}
.tab-controll{
    width:100%;
    margin-bottom:50px;
}
.first-tab-controll{
    width:290px;
    margin-right:0;
    height:50px;
    border-bottom:2px solid #6c6c6c;
}
.tab-controll-featured{
    font-size:36px;
    height:49px;
    font-weight:700;
    letter-spacing:0px;
    color:#6c6c6c;
    float:left;
}
.tab-controll-featured:active{
    font-size:36px;
    font-weight:700;
    letter-spacing:0px;
    border-bottom:4px solid #212121;
    color:#212121;
}
.tab-controll-featured:hover{
    cursor:pointer;
}
.tab-controll-new{
    margin-left:31px;
    margin-right:0;
    float:left;
    height:49px;
    font-size:36px;
    font-weight:700;
    letter-spacing:0px;
    color:#6c6c6c;
}
.tab-controll-new:active{
    font-size:36px;
    font-weight:700;
    letter-spacing:0px;
    border-bottom:4px solid #212121;
    color:#212121;
}
.tab-controll-new:hover{
    cursor:pointer;
}
.btn-ghost-exploreAll{
    height:50px;
    float:right;
    margin:0;
    color: #212121;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3.6px;
    font-size:36px;
    color:#6c6c6c;
}

<div class="featured-product">
            <div class="tab-controll clearfix">
                <div class="first-tab-controll">
                    <p class="tab-controll-featured">Featured</p>
                    <p class="tab-controll-new clearfix">New</p>
                </div>
                <div >
                    <p class="btn-ghost-exploreAll clearfix">explore all ></p>
                </div>
            </div>
            <div class="tab-content">
                <div class="product-content-hover">
                    <a href="#" class="icon-hover">></a>
                    <p class="fishnet-chair">Fishnet Chair</p>
                    <p class="details">Seat and back with upholstery made of cold cure foam
. Steel frame, available in matt powder-coated black
 or highly polished chrome.</p>
                </div>
                <img src="Images/product-1.jpg"></img>
                <img src="Images/product-2.jpg"></img>
                <img src="Images/product-3.jpg"></img>
                <img src="Images/product-4.jpg"></img>
            </div>
        </div>

Answer 1

Поправил, относительно того что смог понять из Вашего вопроса:

p {
  padding: 0;
  margin: 0;
}

.featured-product {
  width: 900px;
  height: 369px;
  margin: 120px auto;
}

.tab-controll {
  position: relative;
  width: 100%;
  margin-bottom: 50px;
}

.first-tab-controll {
  width: 290px;
  margin-right: 0;
  border-bottom: 2px solid #6c6c6c;
}

.tab-controll-featured {
  display: inline-block;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0px;
  color: #6c6c6c;
}

.tab-controll-featured:active {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0px;
  border-bottom: 4px solid #212121;
  color: #212121;
}

.tab-controll-featured:hover {
  cursor: pointer;
}

.tab-controll-new {
  display: inline-block;
  margin-left: 31px;
  margin-right: 0;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0px;
  color: #6c6c6c;
}

.tab-controll-new:active {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0px;
  border-bottom: 4px solid #212121;
  color: #212121;
}

.tab-controll-new:hover {
  cursor: pointer;
}

.btn-ghost-exploreAll {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  color: #212121;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3.6px;
  font-size: 36px;
  color: #6c6c6c;
}

<div class="featured-product">
  <div class="tab-controll clearfix">
    <div class="first-tab-controll">
      <p class="tab-controll-featured">Featured</p>
      <p class="tab-controll-new clearfix">New</p>
    </div>
    <div class="new">
      <p class="btn-ghost-exploreAll clearfix">explore all ></p>
    </div>
  </div>
  <div class="tab-content">
    <div class="product-content-hover">
      <a href="#" class="icon-hover">></a>
      <p class="fishnet-chair">Fishnet Chair</p>
      <p class="details">Seat and back with upholstery made of cold cure foam . Steel frame, available in matt powder-coated black or highly polished chrome.</p>
    </div>
    <img src="Images/product-1.jpg"></img>
    <img src="Images/product-2.jpg"></img>
    <img src="Images/product-3.jpg"></img>
    <img src="Images/product-4.jpg"></img>
  </div>
</div>

Так же обратите внимание на большое количество одинакового кода в Вашем CSS, который достаточно легко можно оптимизировать, скомпоновав селекторы друг с другом.

БЛОГ НА HUSL

Выровнять блоки относительно друг друга CSS

Ответы (1 шт):