JSFiddle - React, Tailwind, and code Playground

by Elvin Asadov

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="h-100 w-100 p-0">
  <div class="d-flex w-100">
    <div class="d-flex w-100">
      <div class="w-50 left-actions">
        <div class="d-flex">
          <div class="d-flex align-items-center col-auto-resized">
            <select>
              <option>1</option>
              <option>2</option>
              <option>3</option>
            </select>

            <div class="d-flex">
              <div class="wrapper-aem flex-1">
                <p>
                  Lorem ipsum sit amet we qwe qwe qwe q q. Second part
                </p>
              </div>
              <div class="block flex-1">
                <button class="btn btn-icon info-icon" type="button">
                  <svg height="16pt" viewBox="0 -10 511.98685 511" width="16pt" xmlns="http://www.w3.org/2000/svg">
                    <path d="m510.652344 185.902344c-3.351563-10.367188-12.546875-17.730469-23.425782-18.710938l-147.773437-13.417968-58.433594-136.769532c-4.308593-10.023437-14.121093-16.511718-25.023437-16.511718s-20.714844 6.488281-25.023438 16.535156l-58.433594 136.746094-147.796874 13.417968c-10.859376 1.003906-20.03125 8.34375-23.402344 18.710938-3.371094 10.367187-.257813 21.738281 7.957031 28.90625l111.699219 97.960937-32.9375 145.089844c-2.410156 10.667969 1.730468 21.695313 10.582031 28.09375 4.757813 3.4375 10.324219 5.1875 15.9375 5.1875 4.839844 0 9.640625-1.304687 13.949219-3.882813l127.46875-76.183593 127.421875 76.183593c9.324219 5.609376 21.078125 5.097657 29.910156-1.304687 8.855469-6.417969 12.992187-17.449219 10.582031-28.09375l-32.9375-145.089844 111.699219-97.941406c8.214844-7.1875 11.351563-18.539063 7.980469-28.925781zm0 0" fill="#ffc107" /></svg>
                </button>
   ...

CSS

select {
  width: 100px;
}

.col-auto-resized {
  overflow: hidden;
  min-width: calc(100%-330px);
}

.fixed-right-aligned {
  min-width: 330px;
  background-color: gray;
}

.left-actions {

  background-color: #FA4567;
}

.right-actions {
  background-color: #13A352;
}


.left-content {
  background-color: #4667FA;
}

.right-content {
  background-color: #67FA46;
}

.wrapper-aem {
  height: 20px;
  position: relative;
  overflow: hidden;
  padding-right: 5px;
}

.wrapper-aem>p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.three-dots {
  position: absolute;
  top: 0;
  right: 0;
}

.flex-1 {
  flex: 1;
}