I am attempting to organize text and buttons into a row, with the buttons aligned on the right side and the text on the left side.
My approach involves creating a flexbox layout and assigning items the appropriate classes for alignment.
html, body { width: 100%; }
.flexbox {
flex-direction: row;
width: 100%;
display: flex;
align-items: center;
}
.right {
align-self: flex-end;
}
.left {
align-self: flex-start;
}
<div class="flexbox" *ngFor="let a of api.active_articles">
<a class="left">{{a.nameDe}}/{{a.nameIt}}</a>
<a class="left">{{a.descriptionDe}}/{{a.descriptionIt}}</a>
<button class="right" id="edit">Edit</button>
<button class="right" id="delete">Delete</button>
</div>
Initially, I assumed that setting flex-direction to row would align items from left to right within the div. However, this wasn't the case as it placed the left items at the top and the right items at the bottom, both horizontally aligned without proper distinction.