How to center a title while ignoring the icon next to it?

Question

Let's say I have some code like this:

.container {
  width: 300px;
  margin: 25px auto;
  border: 1px solid #ddd;
}

.header {
  display: flex;
  justify-content: center;
  color: #444;
  font-size: 20px;
}

.description {
  display: flex;
  justify-content: center;
  color: #666;
}

<div class="container">
  <div class="header">
    <div class="title">title</div>
    <div class="icon">icon</div>
  </div>
  <div class="description">
    description
  </div>
</div>

You'll notice that title isn't centered above the description because it centers the entire div of title and icon. Is there any way to "ignore" the icon and only center the title, such that the title is centered above the description, and the icon is just placed to the right of it?

The only thing I can think of is to make header position: relative and icon position: absolute but then it doesn't work if the title wraps to multiple lines. Also, that just seems more fragile.

Answer 1

You can set the width of icon to 0px and to show the value, can set overflow: initial.

.container {
  width: 300px;
  margin: 25px auto;
  border: 1px solid #ddd;
}

.header {
  display: flex;
  justify-content: center;
  color: #444;
  font-size: 20px;
}

.icon {
  width: 0px;
  overflow: initial;
}

.description {
  display: flex;
  justify-content: center;
  color: #666;
}

<div class="container">
  <div class="header">
    <div class="title">title</div>
    <div class="icon">icon</div>
  </div>
  <div class="description">
    description
  </div>
</div>