How do I get items in a div to stack vertically

Issue

Im trying to make a mock online store and cannot figure out how to stack an items description with its image. I have everything inside a grid container. I can center each element individually but when I try to stack the image over the desription/drop down/button they create 2 new columns in the box. Is there a way I can put the image on top of the description and then both of those elements on top of the dropdown menu and button?

#column_left{
display: grid;
width:100%;
height: 900px;
border: solid 2px black;
grid-template-rows: 33% 33% 33%;
}

#column_right {
    display: grid;
    width:100%;
    height: 900px;
    border: solid 2px black;
}

.item {
    border: solid 2px black;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; 
}

.sample_img {
    height: 50%;
    width: auto;
}

<div class="item">
    <img class="sample_img" src="https://st2.depositphotos.com/3080513/7014/i/600/depositphotos_70144489-stock-photo-t-shirt-template.jpg">

    <p>Sticks T-shirt</p>
    <label for="size">Choose a Size</label>
    <select name="size" class="size" >
        <option value="XS">XS</option>
        <option value="S">S</option>
        <option value="M">M</option>
        <option value="L">L</option>
        <option value="XL">XL</option>
        <option value="XXL">XXL</option>
    </select>
    <button class="addToCart" type="submit">Add to Cart</button>

</div>

Solution

Add this to .item class

flex-direction: column;

in this case, the picture and the rest of the content will be one under the other

.item {
    border: solid 2px black;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; 
    flex-direction: column;
}

Answered By - wch