Align icon on right for multiline text with list item

Morpheus Published at Dev

Morpheus

To start with, here is the code:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  display: flex;
  max-inline-size: 10rem;
}

ul li .fa:first-of-type {
  margin-right: 1rem;
}

ul li .fa:last-of-type {
  margin-left: 1rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />

<ul>
  <li>
    <i class="fa fa-address-book" aria-hidden="true"></i> Short text
    <i class="fa fa-address-book" aria-hidden="true"></i>
  </li>
  <li>
    <i class="fa fa-address-book" aria-hidden="true"></i> Long text wrapping on multiple lines
    <i class="fa fa-address-book" aria-hidden="true"></i>
  </li>
</ul>

The problem I have is that the icon on the right of the multiline text gets pushed to the edge of the list item, while it looks OK when the text is on single line.

I am using flex as I want the text to align vertically on the left edge and that needs to stay unchanged.

Martin

You could set a width for the list item, but in order to align the icons to the right side you should use margin-left: auto; on the ul li .fa:last-of-type

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  display: flex;
  max-inline-size: 10rem;
  position:relative;
  padding-left: 30px;
  
}
span.text{
  display: inline-block;
  /*width:80px;*/
}

ul li .fa:first-of-type {
  margin-right: 1rem;
  position: absolute;
  left: 0;
  top: 0;
}

ul li .fa:last-of-type {
  margin-left: 1rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />

<ul>
  <li>
    <i class="fa fa-address-book" aria-hidden="true"></i> <span class="text">Short text</span>
    <i class="fa fa-address-book" aria-hidden="true"></i>
  </li>
  <li>
    <i class="fa fa-address-book" aria-hidden="true"></i> <span class="text"> Long text wrapping on multiple lines </span>
    <i class="fa fa-address-book" aria-hidden="true"></i>
  </li>
</ul>

For more on working with flex, you should check this article https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Collected from the Internet

Please contact [email protected] to delete if infringement.