如何将这四个div元素与图像并排对齐

<style>
    .container {
        display: flex;
    }
    .image {
        width: 200px;
        height: 200px;
    }
    .div-element {
        flex: 1;
        /* 其他样式设置 */
    }
</style>

<div class="container">
    <img src="image.jpg" alt="图像" class="image">
    <div class="div-element">Div元素1</div>
    <div class="div-element">Div元素2</div>
    <div class="div-element">Div元素3</div>
    <div class="div-element">Div元素4</div>
</div>

<style>
    .container {
        display: grid;
        grid-template-columns: repeat(5, 1fr); /* 五列，每列宽度相等 */
        grid-gap: 10px; /* 列之间的间隔 */
    }
    .image {
        grid-column: 1 / 2; /* 图像占据第一列 */
        /* 其他样式设置 */
    }
    .div-element {
        /* 其他样式设置 */
    }
</style>

<div class="container">
    <img src="image.jpg" alt="图像" class="image">
    <div class="div-element">Div元素1</div>
    <div class="div-element">Div元素2</div>
    <div class="div-element">Div元素3</div>
    <div class="div-element">Div元素4</div>
</div>