JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card">
  <div class="card-content">
    <div>
      <div class="row">
        <p class="note-title">This is a relatively lengthy example title for example purposes.</p>
        <div>
          <div class="row">
            <div class="note-tags-list">
              <p id="blank-tag">.</p>
              <p class="tag note-tag">crunchy</p>
              <p class="tag note-tag">recipe</p>
              <p class="tag note-tag">carrot</p>
            </div>
            <p id="text-that-should-stay">I stay</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

@import "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css";

#text-that-should-stay {
  white-space: nowrap;
  color: white;
}

#blank-tag {
  width: 30px;
  min-width: 30px;
}

.note-title {
    white-space: nowrap;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card {
    background-color: black;
}

.row {
    display: flex;
    justify-content: space-between;
}

.note-tag {
  width: 175px;
  min-width: 0px;
}

.note-tags-list {
    display: flex;
    flex-flow: row wrap;
    overflow: hidden;
    height: 24px;
    justify-content: flex-end;
}