How do I align the respective box right-bottom of the container using flexbox?

Question

enter image description here

I'm trying to align the green border box in the right corner, but unsuccessfully, doesn't anyone have an idea?

.gallery {
    display: flex;
    height: 480px;
    width: 1170px;
    position: relative;
    flex-wrap: wrap;
    outline: 3px solid black;
    margin: 50px auto 0;
}

.gallery .column:last-child {
    width: 770px;
    height: 224px;
    display: flex;
    justify-content: flex-start;
    border: 3px solid green;
}

.gallery .column:last-child .box {
    height: 224px;
    width: 770px;
}

<div class="gallery">
    <div class="column">
        <div class="box">
            <div class="suggested-text">
                <h2>Quae ab illo inventore</h2>
                <p>Architecto beatae vitae dicta sunt</p>
                <button type="button">Shop now</button>
            </div>
            <img src="img/Bitmaplaptops.png" alt="">
        </div>
    </div>
</div>

Answer 1

By setting justify-content: flex-end and align-items: flex-end on the .gallery and .gallery .column:last-child selectors, the green border box will be aligned to the bottom-right corner of the container.

Example:

.gallery {
    display: flex;
    height: 480px;
    width: 1170px;
    position: relative;
    flex-wrap: wrap;
    outline: 3px solid black;
    margin: 50px auto 0;
    justify-content: flex-end;
    /* Align items horizontally to the right */
    align-items: flex-end;
    /* Align items vertically to the bottom */
}

.gallery .column:last-child {
    width: 770px;
    height: 224px;
    display: flex;
    justify-content: flex-end;
    /* Align items horizontally to the right */
    align-items: flex-end;
    /* Align items vertically to the bottom */
    border: 3px solid green;
}

.gallery .column:last-child .box {
    height: 224px;
    width: 770px;
}

<div class="gallery">
    <div class="column">
        <div class="box">
            <div class="suggested-text">
                <h2>Quae ab illo inventore</h2>
                <p>Architecto beatae vitae dicta sunt</p>
                <button type="button">Shop now</button>
            </div>
            <img src="img/Bitmaplaptops.png" alt="">
        </div>
    </div>
</div>