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

.flex {width: 100%;padding: 20px 0;box-sizing: border-box; display: flex; flex-direction:row;justify-content: center;}

.left, .right {width: 100px; flex-shrink: 0; background: #CCC}
.content {width: 100%; flex-shrink: 1; background: #FFF}

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