Align anchors in a flex as floating text

LeO 0
Viewed 37

I have currently the following definition:

<div class="div-container">
 <mat-icon>new_release</mat-icon>
 <span>&nbsp;</span>
 <a><span>VO/YI/AI 1 HJ.2022a;</span></a>
 <span>&nbsp;</span>
 <a><span>ABC/BBC/VOA 7.2022;</span></a>
 <span>&nbsp;</span>
 <a><span>UN/AIDA 16.8.2022</span></a>
</div>

with

.div-container{
    display: flex;
    align-items: center;
}
a{
 display: inline!important;
}

which results in a display like

enter image description here

What I would like to have is the image on the left side and than floating text, e.g.

VO/YI/AI 1 HJ.2022a; ABC/BBC/VOA 7.2022; UN/AIDA 16.8.2022

or if the space is too less on the left side the icon and something like

VO/YI/AI 1 HJ.2022a; ABC/BBC/VOA 
7.2022; UN/AIDA 16.8.2022

Honestly don't know if the flex is required or not. But the icon should be positioned vertically centered on the left.

css html
1 Answers

you don't need the empty spaces and if you want to add space, you can use margin for your elements.

.div-container{
    display: flex;
  flex-direction:row;
    align-items: center;
  flex-wrap:wrap;
}
<div class="div-container">
 <mat-icon>new_release</mat-icon>
 <a><span>VO/YI/AI 1 HJ.2022a;</span></a>
 <a><span>ABC/BBC/VOA 7.2022;</span></a>
 <a><span>UN/AIDA 16.8.2022</span></a>
</div>

HamiD0
Related