How to align a Div to float right and middle? - html

Question

I am building a custom chips control and facing a problem in aligning a close div to the right and middle. Can someone help please. I want to align the close button vertically middle if the text wraps to multiple lines
<div class="chips-container">
<div *ngFor="let item of items; let i = index" class="chips">
<div class="chip-text">{{ item }}</div>
<div class="chip-close">x</div>
</div>
<input
class="input-chips"
(keyup.enter)="add($event)"
(keyup)="autogrow($event)"
style="width: 15px"
/>
</div>
My Style
.chips-container {
border: 1px solid gray;
height: auto;
min-height: 30px;
width: 230px;
position: relative;
}
.chips {
background-color: rgb(236, 236, 236);
border: 1px solid rgb(124, 124, 124);
border-radius: 14px;
margin: 3px;
padding-left: 3px;
height: auto;
display: inline-block;
}
.chip-text {
display: inline-block;
vertical-align: middle;
word-wrap: break-word;
}
.chip-close {
background-color: rgb(204, 204, 204);
height: 20px;
width: 20px;
border-radius: 50%;
//display: inline-block;
text-align: center;
margin-left: 2px;
float: right;
}
I replaced my Divs with table layout and it looks good, however, my input text control aligns in the bottom
<div class="chips-container">
<table
*ngFor="let item of pgFilters[i].value; let i = index"
class="chips"
>
<tr>
<td class="chip-text">{{ item }}</td>
<td><div class="chip-close">x</div></td>
</tr>
</table>
<input
style="width: 15px"
/>
</div>

Answer 1

Use positioning, put relative position on the parent element, in your case: .chips, and then relative position on the .chip-close, and then position it as you wish. Btw also added padding-right on the text itself, just so the word wouldn't overlap with the x icon.
.chips-container {
border: 1px solid gray;
height: auto;
min-height: 30px;
width: 230px;
position: relative;
}
.chips {
background-color: rgb(236, 236, 236);
border: 1px solid rgb(124, 124, 124);
border-radius: 14px;
margin: 3px;
padding-left: 3px;
height: auto;
position: relative;
}
.chip-text {
display: inline-block;
word-wrap: break-word;
padding-right: 20px;
}
.chip-close {
background-color: rgb(204, 204, 204);
height: 20px;
width: 20px;
border-radius: 50%;
text-align: center;
position: absolute;
top: 50%;
right: 2px;
transform: translateY(-50%);
}
<div class="chips-container">
<div *ngFor="let item of items; let i = index" class="chips">
<div class="chip-text">this is just a test tjak jldskfds lsdjkf kjdf eljf lsadjfoi lajkdfoasdfkj </div>
<div class="chip-close">x</div>
</div>
<input
class="input-chips"
(keyup.enter)="add($event)"
(keyup)="autogrow($event)"
style="width: 15px"
/>
</div>