how to get the same line through different <p> Tags

Question

am trying to use this css property "text-decoration: line-through;" on two different

Tags and without breaking the line

.pricereview {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.price {
  display: flex;
  align-items: end;
  text-decoration: line-through;
}

.prixunit {
  color: lightgrey;
  font-size: 20px;
  line-height: 20px;
}

.tnd {
  color: lightgrey;
  font-size: 13px;
  line-height: 26px;
  padding-left: 5px;
}

<div class="pricereview">
  <div class="price">
    <p class="prixunit">560</p>
    <p class="tnd">TND</p>
  </div>
</div>

This is the result that I want: Screenshot here

Answer 1

I'd suggest using <span> tags and wrapping them in another element. Use a pseudo-element on the wrapper to make your "linebreak" span multiple elements of different font sizes and line heights without breaking.

.price {
  position: relative;
  display: inline-block;
}

.price::after {
  content: '';
  position: absolute;
  top: 45%;
  left: 0;
  width: 100%;
  border-bottom: solid 1px #000;
}

.prixunit {
  font-size: 20px;
  line-height: 20px;
}

.tnd {
  font-size: 13px;
  line-height: 26px;
  padding-left: 5px;
}

<p class="price">
  <span class="prixunit">560</span>
  <span class="tnd">TND</span>
</p>