I am trying to align two spans inside a flex div like shown in this.
Currently, it looks like this
Here is the code I have:
<div className="MemberLinks">
<div>
<span className="linkTitle">Schedule of Benefits</span>
<span>
<a href="./manifest.json">
doc.pdf
</a>
</span>
</div>
<div>
<span className="linkTitle">General Exclusions</span>
<span>
<a href="./manifest.json">
doc.pdf
</a>
</span>
</div>
</div>
CSS:
.MemberLinks {
margin-top: 1em;
display: flex;
flex-direction: column;
}
.linkTitle {
display: inline-block;
margin: 0 .6em 0 0;
}
I want to achieve horizontally aligned spans with even spacing between them.