How to adjust one element to another in absolute position?

Question

What I wish to do:

That the block element adjusts its height with respect to an element in absolute position.

Problematic:

If the price is too long, the price leaves the block.

Conditions:

• The block element must be clickable to go to the link.
• The price must not be in the link for referencing.

What I've been trying to do:

Make the price element clickable in javascript to go to the link and delete the absolute position, this solution was not chosen because you cannot do "CTRL + CLICK" to open in a new tab.

The case that works well:

* {
  box-sizing: border-box;
}

.block {
  background: #3CAEA3;
  display: inline-block;
  position: relative;
}

.link {
  display: inline-block;
  padding: 20px 20px 40px 20px;
  text-align: center;
  text-decoration: none;
}

.title {
  font-size: 20px;
}

.subtitle {
  font-size: 16px;
}

.price {
  height: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}

<div class="block">
  <a class="link" href="https://google.com">
    <div class="title">Coffee table</div>
    <div class="subtitle">Made of wood</div>
  </a>
  <div class="price">
     The price is: 100€
  </div>
</div>

The case that doesn't work:

* {
  box-sizing: border-box;
}

.block {
  background: #3CAEA3;
  display: inline-block;
  position: relative;
}

.link {
  display: inline-block;
  padding: 20px 20px 40px 20px;
  text-align: center;
  text-decoration: none;
}

.title {
  font-size: 20px;
}

.subtitle {
  font-size: 16px;
}

.price {
  height: 20px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}

<div class="block">
  <a class="link" href="https://google.com">
    <div class="title">Coffee table</div>
    <div class="subtitle">Made of wood</div>
  </a>
  <div class="price">
     The price is tooooo long: 100€
  </div>
</div>

Do you have any solutions to my problem ?

Thank you.

Answer 1

I found a solution!

.block {
  background: #3CAEA3;
  position: relative;
  text-align: center;
  max-width: 200px;
  margin: 10px;
}

.link,
.fakeLink {
  padding: 20px;
}

.link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  text-decoration: none;
}

.fakeLink{
  opacity: 0;
}

.price {
  padding: 0 10px 10px 10px;
  text-align: center;
  pointer-events: none;
}

.title {
  font-size: 20px;
}

.subtitle {
  font-size: 16px;
}

<div class="block">
   <div class="fakeLink">
    <div class="title">Coffee table</div>
    <div class="subtitle">Made of wood</div>
  </div>
  <div class="price">
     The price is tooooo tooo tooo tooo too long: 100€
  </div>
  <a class="link" href="https://www.google.com">
    <div class="title">Coffee table</div>
    <div class="subtitle">Made of wood</div>
  </a>  
</div>

<div class="block">
   <div class="fakeLink">
    <div class="title">Coffee table</div>
    <div class="subtitle">Made of wood</div>
  </div>
  <div class="price">
     The price is 100€
  </div>
  <a class="link" href="https://www.google.com">
    <div class="title">Coffee table</div>
    <div class="subtitle">Made of wood</div>
  </a>  
</div>

Thank you for your help.