display: flex;로 설정된 부모 컨테이너 내부의 자식 요소들을 정렬하는 데 사용됩니다.

tailwindcss에서 display: flex; 는 flex

<div>
    <div th:text="${attach.originalName}">
    </div>
    <svg class="fill-black hover:fill-blue-500 cursor-pointer" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
</div>

flex속성을 이용해서 Flexible Box Layout으로 만듭니다. 기본이 row인지 바로 옆으로 이동합니다.

<div class="flex">
    <div th:text="${attach.originalName}">
    </div>
    <svg class="fill-black hover:fill-blue-500 cursor-pointer" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
</div>

flex박스 안쪽 item들이 주축에서 공간을 나누도록 justify-between을 추가 합니다.

<div class="flex justify-between">
    <div th:text="${attach.originalName}">
    </div>
    <svg class="fill-black hover:fill-blue-500 cursor-pointer" height="24" viewBox="0 -960 960 960" width="24"><path d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"/></svg>
</div>