My current form layout is not very user-friendly, as it appears to be too long for one row. I have fields for amount, note, date, and an option list.
I would like to arrange the form so that amount and note are displayed in one row, followed by date and optionList on the next row.
The desired layout is as follows:
amount note
date optionList
create cancel
I have attempted using display: grid but have not achieved the desired result.
Below is the code snippet:
.transaction-group{
position:relative;
top:50px;
text-align:left;
width: 100%;
height: 100%;
}
.date-balance {
background-color:
#e0ddcf;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -4px rgba(0, 0, 0, 0.1);
padding: 10px 20px;
overflow: hidden;
}
#left {
float: left;
}
#right {
float: right;
}<div class="transaction-group" th:each="singleGroup : ${transactionGroup}">
<div class="date-balance">
<h1 id="left">123</h1>
<h2 id="right">Balance <span>32.0</span></h2>
</div>
</div>