HTML & CSS Text placement in card

[Personne]

Hello guys,

just starting with CSS, I'm trying to have fun with flexbox (which seems to work), but I'm having difficulties to have a static text placement in my 'card'

As you will understand, there is just a break line between the text.

What I'd like to do is to make sure:

1) input class="qty" is always at the top of the card - by default it is as it is the first field
2) make sure the 'Black' is in the middle of the card
3) the 'BIG-11' line is always at the very bottom of the card with a padding from the bottom of the card of 3 or 4 pixels

It is a placement problem, and I'm sure I should replace of the <BR> by something else.

I'm sure it is just a matter of saying place qty at the top, place 'Black' at 50% of the height of the card, and 'Big-11' at the bottom.

I know it is simple, I just cannot figure it out

Ill try to post a picture later if needed. But in short here is the code of the card

<div class="card2" style="background: #212121;">
    <input id="parts-3-invid" name="parts-3-invid" type="hidden" value="1842">
    <input id="parts-3-oriqty" name="parts-3-oriqty" type="hidden" value="7">
    <input class="qty" id="parts-3-qty" maxlength="6" minlength="1" name="parts-3-qty" style="background: #212121" type="text" value="7">
    <span class="colornamegs" style="color:#FFFFFF;">Black</span><br>
    <span class="colornamegs" style="color:#FFFFFF;">Big-11</span><br>
</div>

CSS:

.card2 {
    background-color: rgba(255, 255, 255, 0.747);
    width: 70px;
    height: 70px;
    margin: 4px;
    border-width: 5px;
    border-color: rgb(209, 39, 39);
    font-size: .7rem;
    text-align: center;
    FONT-FAMILY: Verdana, Arial;
    box-shadow: 3px 3px 3px rgb(87, 87, 87);
    line-height: 1.2;
}

Thank you guys