JSFiddle - React, Tailwind, and code Playground

HTML

<div class="attach-conteiner-work border-r">
                             <div class="attach-work border-b f-l">
                                <img src="img/attach-file.png">
                                <a class="name-file-attach-work">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At dolores illo quis temporibus tenetur? Assumenda at dolore ducimus labore laudantium magnam magni minus, nihil numquam suscipit unde vel veniam voluptates.</a>
                                <a class="filetype-file-attach-work">.doc</a>
                                <a class="file-size-attach-work">(10Мб)</a>
                                <a class="dawload-file-attach-work">Скачать</a>

                            </div>
                            <div class="actions-inbox-msg-work">

                            </div>
                        </div>

CSS

.attach-conteiner-work{
    width: 100%;
    height: auto;/*
    display: table;*/


}

.attach-work{
    position: relative;
    width: 100%;
    border-bottom: 1px solid #B8B8B8;
}

.attach-work a{
    font-size: 12px;
    font-family: "trebuchet ms", sans-serif;
    color: #37BDE9;
    font-weight: bold;
    text-decoration: underline;
}
.attach-work a:hover{
    color: #70CF70;
    text-decoration: none;
    cursor: pointer;

}.attach-work a:active{
    cursor: pointer;
    color: #E18322 ;
    text-decoration: none;

}

.name-file-attach-work{
    max-width: 75%;
    display: inline-block;
    text-align: justify;
    color: #666666;
    font-size: 12px;
    font-family: "trebuchet ms", sans-serif;
    font-weight: bold;
    text-indent: 0;

    white-space: nowrap; /* Запрещаем перенос строк */
    overflow: hidden; /* Обрезаем все, что не помещается в область */
    text-overflow: ellipsis; /* Добавляем многоточие */
}