JSFiddle - React, Tailwind, and code Playground

by Ricardo Ruiz

HTML

<div class="traffic-info-bar" ng-if="hasTrafficInfo" ng-click="openTrafficInfoModal()">
  <div class="traffic-info-main-text__container">
    <span class="icon ion-alert-circled"></span>
    <span class="traffic-info-main-text">This is a very long placeholder text</span>
  </div>
  <div class="traffic-info-read-more__container">
    <span class="traffic-info-read-more ellipses">Read more</span>
  </div>
</div>

CSS

.traffic-info-bar {
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  text-align: center;
  background-color: #007aff;
  height: 40px;
  padding-top: 12px;
}

.traffic-info-main-text__container {
  float: left;
  width: 80%;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid pink;
  box-sizing: border-box;
  padding: 0 10px;
}

.traffic-info-main-text {
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.traffic-info-read-more__container {
  float: left;
  width: 20%;
  border: 1px solid yellow;
  box-sizing: border-box;
}

.traffic-info-read-more {
  font-size: 10px;
  text-decoration: underline;
}