как заставить div расти в ширине, когда содержимое внутри него расположено абсолютно

Question

У меня есть div, внутри которого есть текст с субтитрами, который всегда должен располагаться справа внизу таким образом

Я достиг этого, сделав родительский div относительным, а содержимое внутри него - абсолютным. Но верхний текст может увеличиться до любой длины, и я хочу, чтобы родительский div расширялся вместе с ним, а не перекрывал другие элементы, которые он делает, как показано в изображении

Вот что я попробовал.

header {
height: 60px;
padding: 0 12px;
background: #fff;
position: fixed;
width: calc(100% - 24px);
z-index: 999999; // no z-index values above this for any body elements
box-shadow: 7px -9px 6px 6px $black;
left: 0;
li {
    float: right;
    display: block;
    margin-left: 20px;
    padding: 20px 0;
    width: 18px;
    text-align: right;
    i {
        color: $icon-grey;
        font-size: $header-icon-size;
        cursor: pointer;
        &.fa-times {
            color: $icon-red;
        }
        &.notify{
            color: gold;
        }
        &.fa-caret-down{
            color: gold;
        }
    }
    img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-top: -0.7em;
        object-fit: cover;
        object-position: center right;
    }
}
.user-info {
    text-align: right;
    display: inline-block;
    margin-top: -0.5em;
    h5{
        color: $section;
    }
    span{
        color: $icon-grey;
        font-size: 14px;
    }

  }
  .user-details{
      margin-right: 15px;
  }
}

<header>
  <li>
    <i class="fas fa-caret-down"></i>
  </li>

  <li>
    <img src="{{user.image}}">
  </li>
  <li>
    <div class="user-info">
      <h4>Smith</h4>
      <p>CAD</p>
    </div>
  </li>

  <li class="notification-menu">
    <i class="fas fa-bell"></i>
  </li>
</header>

Все элементы внутри заголовка выровнены по правой стороне. Я не мог найти решение, которое просто использует CSS.

Answer 1

Просто используйте text-align:right ... это кажется достаточным. Нет необходимости в дополнительных модных макетах , если только в этом нет больше, чем кажется .

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.user-info {
  text-align: right;
  display: inline-block;
  border: 1px solid grey;
}

<div class="user-info">
  <h4>Smith</h4>
  <p>CAD</p>
</div>

<div class="user-info">
  <h4>Longer name - Smith</h4>
  <p>CAD</p>
</div>

<div class="user-info">
  <h4>Smith</h4>
  <p>Longer Initials CAD</p>
</div>