JSFiddle - React, Tailwind, and code Playground

by aliaksej

HTML

<div class="notification">
  <span class="icon">!</span>
  <span class="text"> fadsf adsf dfdasfddlk alfjdsl;fj dls;ajsfjda fj;dslfkjd afjsdkfjdsf;</span>
  <a class="close" href="#">x</a>
</div>

<div class="notification">
  <span class="icon">!</span>
  <span class="text"> fadsf adsf dfdasfddlk alfjdsl;fj dls;ajsfjdafj; dslfkjdafj sdkfjdsf; fasdf dsafdf afd fdafds fdafds fdfafdas fdaffd addf adsfd fdf asfdfdfas</span>
  <a class="close" href="#">x</a>
</div>

CSS

.notification {
  margin-bottom: 20px;
  display: flex;
  width: 100%;
}

.icon {
  margin-right: 10px;
}

.icon, .close {
  border: 1px solid red;
  border-radius: 7px;
  height: 14px;
  width: 14px;
  text-align: center;
  font-size: 12px;
  display: flex-item;
}
.text {
  display: flex-item;
  width: 100%;
}