Возможно глупый вопрос. Нужна помощь, я еще учусь, навыков не так много, но хочется завершить начатую работу, я многое сделала, но осталось самое сложное для меня.
Пример того, как должен выглядеть конечный результат:
В рамке сумма должна быть справой стороны, с левой — все остальное. Как только добавила линию, которая на скриншоте находиться над Total - все сразу слетело. Я много что перепробовала, но все не подходит.
Мой код сейчас выглядит так:
<div style="box-sizing: border-box;
display: flex;
justify-content: center;
align-items: flex-start;
padding: 32px;
gap: 24px;
background: #FFFFFF;
border: 1px solid #D7D6DC;
border-radius: 12px;
align-self: stretch;">
<th:block th:each="companyName : ${companyName}">
<p style="line-height: 140%;
color: #333333;
font-size: 14px;
flex: none;
display: table;
word-wrap: break-word;
text-align: left;
height: 100%;
width: 80%;" th:text="${companyName}">пример название
</p>
</th:block>
<th:block th:each="amount : ${amount}">
<p style="line-height: 140%;
color: #333333;
font-size: 14px;
flex: none;
display: table;
word-wrap: break-word;
text-align: right;
height: 100%;
width: 10%;" th:text="${amount}"> сумма
</p>
</th:block>
<div style="width: 408px;
height: 0px;
border: 1px solid #D7D6DC;
flex: none;
align-self: stretch;">
</div>
</div>
Как мне сделать чтобы в рамке все текста отображались на своем месте (не зависимо от количества строк) и "разделяющая" полоса была на своем месте?