JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<p>
Width of menu adapting to content width, with a defined max-width and ellipsis cutoff.
</p>
<br>
<h2>With short texts</h2>
<div class="wrapper">
  <div class="grid-row">
    <div class="col-1">Icon</div>
    <div class="col-2">Etur nobis vel!</div>
  </div>
  <div class="grid-row">
    <div class="col-1">Icon</div>
    <div class="col-2">Lorem ipsum</div>
  </div>
  <div class="grid-row">
    <div class="col-1">Icon</div>
    <div class="col-2">Lorem</div>
  </div>
  <div class="grid-row">
    <div class="col-1">Icon</div>
    <div class="col-2">Consectetur</div>
  </div>
  <div class="grid-row">
    <div class="col-1">Icon</div>
    <div class="col-2"> Nesciunt dolor</div>
  </div>
</div>

<br>
<br>
<h2>With longer texts</h2>
<div class="wrapper">
  <div class="grid-row">
    <div class="col-1">Icon</div>
    <div class="col-2">Etur nobis vel! Nulla varius, leo scelerisque sodales porta, erat orc</div>
  </div>
  <div class="grid-row">
    <div class="col-1">Icon</div>
    <div class="col-2">Lorem ipsum</div>
  </div>
  <div class="grid-row">
    <div class="col-1">Icon</div>
    <div class="col-2">Lorem Nam tincidunt velit et cursus tristique</div>
  </div>
  <div class="grid-row">
    <div class="col-1">Icon</div>
    <div class="col-2">Consectetur</div>
  </div>
  <div class="grid-row">
    <div class="col-1">Icon</div>
    <div class="col-2"> Nesciunt dolor Omnis facere magnam</div>
  </div>
</div>

CSS

* {
  font-family: sans-serif;
}
body { 
  padding: 3rem;
}

.wrapper {
  border: 1px solid gray;
  border-radius: 8px;
  padding: 1rem;    
  max-width: 20rem;
  display: inline-block;
}

.grid-row {
  display: grid;
  grid-template-columns: max-content 1fr;
  border-bottom: 1px solid lightgray;
}

.col-1, .col-2 {
  padding: .5rem;
}

.col-1 {
  text-transform: uppercase;
  font-size: .75rem;
  color: dodgerblue;
}

.col-2 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}