JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex">

<div class="left">левый сайдбар</div>
<div class="content">
    <a href="#" class="content__list-item">
      <div class="prev"></div>
      <div class="data">
        <div class="title">Очень очень длинный заголовок, который нужно обрезать с помощью CSS и выводить в одну строку</div>
      </div>
    </a>
</div>
<div class="right">правый сайдбар</div>

</div>

CSS

* {
  box-sizing: border-box;
}
.flex {
  width: 100%;
  padding: 20px 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: nowrap;}

.left, .right {width: 100px; max-width: 15%; flex-shrink: 0; background: #CCC}
.content {width: 70%; padding: 0.5em; flex-shrink: 1; background: #FFF;}

.title {padding-right: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}