Only shrink flexbox horizontally - html

Question

I've been trying to make a custom share button (for google classroom), and it seemed a flexbox was the best way to center the text. I'm making a share button, so I have an image and text. This is my current code for it:
a {
border-color: green;
border-style: solid;
color: white;
border-radius: 3px;
text-decoration: none;
background-color: green;
font-family: calibri;
display: flex-shrink;
justify-content: center;
align-items: center;
}
img {
padding: 5px;
height: 32px;
}
span {
padding: 5px;
}
<a href="https://classroom.google.com/share?url=http://example.com">
<img src="https://ktibow.github.io/classroom-logo.png"\>
<span>Share to Classroom</span>
</a>
It's supposed to make a nice rounded button, with the Google Classroom logo on the left and the text on the right. But instead, the background of the button shrinks down past the image.
I've tried using it without flex-shrink. Then it fills the whole page, which isn't how share buttons usually are, even though it does cover the background of the image. I've also tried setting the height of the span and the font size too. The height doesn't do anything, and if I do font size, then it gets cut off. I've tried flex-shrink: 0 too on the image. Does anybody know how to solve this?

Answer 1

New Design
I work with give the a tag display: inline-block
And move the img to position: absolute
I think it's look better now
a {
text-decoration: none;
display: inline-block;
margin: 10px 5px 10px 24px;
position: relative;
}
img {
position: absolute;
border-radius: 50%;
height: 38px;
top: -10px;
left: -18px;
}
span {
padding: 3px 5px 3px 24px;
background-color: green;
border-radius: 3px;
color: white;
font-family: calibri;
}
<a href="https://classroom.google.com/share?url=http://example.com">
<img src="https://ktibow.github.io/classroom-logo.png"\>
<span>Share to Classroom</span>
</a>
Or as ppl wrote with display: inline-flex
a {
text-decoration: none;
display: inline-flex;
align-items: center;
margin: 10px 5px 10px 24px;
background-color: green;
border-radius: 3px;
padding: 5px;
}
img {
height: 38px;
}
span {
padding: 5px;
color: white;
font-family: calibri;
}
<a href="https://classroom.google.com/share?url=http://example.com">
<img src="https://ktibow.github.io/classroom-logo.png"\>
<span>Share to Classroom</span>
</a>

Answer 2

a {
border-color: green;
border-style: solid;
color: white;
border-radius: 15px;
text-decoration: none;
background-color: green;
font-family: calibri;
display: flex-shrink;
justify-content: center align-items: center;
position: absolute;
display: flex;
}
img {
padding: 10px;
height: 30px;
}
span {
margin-top: 15px;
}
I don't know if this is what you are trying to achieve.
not the best way though