Flex paragraph takes up more space on its right edge when it has multiple lines or longer words rather than one line

Question

The application I'm working with has a piece of HTML code styled using flex that is present in multiple places to visualize several pop-up messages. The messages have a closing icon in the upper right corner.

However, depending on the length of the message within the

element, the distance between the text and the closing icon changes. For instance, if the text has multiple lines or longer words, the

element takes up more space, the distance between the text and the closing icon increases, and I can't figure out why.

Short text example

Long text example

How do I ensure a uniform distance between them?


      "Editing the product draft continues from the last altered step. 
       Editing the product draft continues from the last altered step."
   
   
      ::before

user_9490169 · Answer

You could use position: absolute to place the close icon and add paddind to the right of the alert box. Here is an example:

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.alert {
  position: relative;
  background: #ffffb7;
  padding: 5px 50px 5px 10px;
  z-index: 1;
  margin-bottom: -10px;
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
}

.alert i {
  position: absolute;
  right: 20px;
}

.container {
  width: 100%;
  height: 60px;
  background: #fff;
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.25);
}




  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus dolor magna, a consequat enim fringilla vitae.

Flex paragraph takes up more space on its right edge when it has multiple lines or longer words rather than one line

1 Answers