1

an icon right next to it:

enter image description here

How can I get rid of the space marked with X? The blue circle with an "i" in it should be to the immediate right side of the text block.

.wrapper {
  /* wrapper has limited space, so that longerText sometimes wraps to 2 or 3 lines */
  width: 25rem;
  
  display: flex;
  
  /** image should be centered next to text */
  align-items: center;
  
  /* gap between text and image should not grow larger than that */
  gap: 0.5rem;
}

.longerText {
  background-color: beige;
  
  /* QUESTION: How to position smallImage right next to longerText (gap no larger than 0.5rem)? */
  flex: auto 0 1;
}

.smallImage {
  /* image shouldn't grow or shrink */
  flex: auto 0 0;
  background-color: lightskyblue;
  text-align: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}
<div class="wrapper">
  <div class="longerText">
    Longer text that uses 1, 2 or 3 lines depending on language and
    available space
  </div>
  <div class="smallImage">i</div>
</div>
Joshua Craven
  • 4,407
  • 1
  • 31
  • 39
TanjaMUC
  • 61
  • 4
  • 1
    Basically, you can't. That's not how the box model works – Paulie_D Nov 24 '21 at 15:49
  • You could set `text-align: justify` but (1) I'm not sure if that's what you're asking/expecting and (2) may not be the same in all cases. Could you explain a bit more? – chazsolo Nov 24 '21 at 15:50

0 Answers0