Here is the code for a component I am working on:
<div class="wrapper">
<div horizontal-group class="filter-container">
<comp-form-item :label="Date">
<comp-datesrange ref="dataRange"
></comp-datesrange>
</comp-form-item>
<comp-form-item label class="filter-actions">
<div horizontal-group class="internal-filter-buttons">
<button class="btn btn-success">
</button>
<button class="btn btn-warning">
</button>
</div>
</comp-form-item>
</div>
<comp-data-grid
></comp-data-grid>
</div>
The desired outcome is to have the two buttons aligned all the way to the right of the page. However, based on the image provided, it's evident that they are positioned towards the right but not in the exact location I intended.
https://i.sstatic.net/0Fa1k.jpg
Below is the CSS styling being used:
<style lang="scss">
.filter-container {
display: grid;
column-gap: 1rem;
row-gap: 1rem;
grid-template-rows: auto;
grid-template-columns: 350px 350px 1fr;
grid-template-areas: "filterActions";
margin-bottom: 30px;
}
.internal-filter-buttons {
text-align: right;
}
</style>
I attempted to replace text-align: right with float: right and also explicitly set the style for the filter-actions class by adding float: right, but unfortunately, no noticeable changes occurred.