На минимизации изображения go вниз от позиции CSS

Question

Я создал этот простой блог о реакции. Один большой пи c и три маленьких картинки на боку. Это нормально на рабочем столе, но когда я минимизирую, основной пи c работает нормально, но маленькие картинки перемещаются вниз, искажая весь вид.

Это.

И это при полной минимизации.

Я пытался играть с относительной и абсолютной позицией, но без эффекта.

Пожалуйста, руководство

Вот HTML

    <Card>
            <div className='galleryPost'>
                <section style={{width: '70%'}}>
                    <NavLink to={`/post/${nangaparbatStuff.slug}`}>
                    <div>
                        <img src={`${nangaparbatStuff.blogImage}`} alt=''/>
                    </div>
                    </NavLink>
                </section>


                <section className='sideImageWrapper' style={{width: '30%', float: 'right'}}>
                    <NavLink to={`/post/${saralStuff.slug}`}>
                    <div className='sideImageHeight'>
                        <img src={`${saralStuff.blogImage}`} alt=''/>
                    </div>
                    </NavLink>

                    <NavLink to={`/post/${chittakathaStuff.slug}`}>
                    <div className='sideImageHeight'>
                        <img src={`${chittakathaStuff.blogImage}`} alt=''/>
                    </div>
                    </NavLink>

                    <NavLink to={`/post/${sheosarStuff.slug}`}>
                    <div className='sideImageHeight'>
                        <img src={`${sheosarStuff.blogImage}`} alt=''/>
                    </div>
                    </NavLink>
                </section>              
            </div>  
        </Card>

Вот CSS

.galleryPost{
    display: flex;
    justify-content: space-between;

}
.galleryPost img{
    width: 100%;   
}
sideImageWrapper div{
    position: relative;
    padding: 1px;
    box-sizing: border-box;
    max-width: 100%;
}
.sideImageWrapper img{
    position: relative;
    object-fit: cover;
    max-height: 100%;
}

.sideImageHeight{
      height: 235px;
  }

Answer 1

Попробуйте это:

.leftImage{
  width:70%;
  float:left;
}
.rightImages{
  width:30%;
  float:right;
}
.image{
  width:100%;
}

<div class="leftImage">
  <img class="image" src="https://miro.medium.com/max/3000/1*MI686k5sDQrISBM6L8pf5A.jpeg"/>
</div>
<div class="rightImages">
  <img class="image" src="https://miro.medium.com/max/3000/1*MI686k5sDQrISBM6L8pf5A.jpeg"/>
  <img class="image" src="https://miro.medium.com/max/3000/1*MI686k5sDQrISBM6L8pf5A.jpeg"/>
  <img class="image" src="https://miro.medium.com/max/3000/1*MI686k5sDQrISBM6L8pf5A.jpeg"/>
</div>