I have a 2-line span inside an anchor tag. The anchor tag is using display:inline-flex; I would like for the width of the span to take the content width rather than the width of the anchor but I can't seem to get it to work.
a {
display:inline-flex;
justify-content:center;
align-items:center;
width:167px;
height:75px;
text-decoration:none;
border:1px solid black;
}
span {
background-color:red;
color:white;
text-align:center;
}<a href="#"><span>consectetur adipiscing elit suspendisse</span></a>The desired result would be for the red background to start and end right at the sides of the first and last word on the first line like this:
