Search code examples
htmlcssword-wrap

How to reduce unnecessary space in div with wrapped word

I have a small div with fixed width and height, inside i have text, that could be probably wrapped and icon All i need is to keep icon as close as possible to text, but if text is wrapped it will have extra space inside it

Example at JsFiddle

HTML

<div class="wrapper">
    <div class="title">
         Total elements
    </div>
    <div class="icon"></div>
</div>

Css

wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 50px;
  width: 100px;
}

.title {
    border: 1px solid green;
}

.icon {
  border: 1px solid red;
  width: 8px;
  height: 8px;
}
Solution

  • You can use CSS Grid system:

    .wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 0em;
  height: 50px;
  width: 100px;
}