Едет изображение вместе с

Доброго всем времени суток,может кто-то объяснить,что я делаю не так?
Есть у меня div ,который я хочу разделить по ширине на два div в соотношении 30 на 70 , при этом в левую часть поместить изображение.Если я делаю так:

HTML:

<div class="article">
  <div class="article_image">
  </div>
  <div class="article_main">
  </div>
</div>

CSS:

.article{
  width:50%;
  background-color:red;
  height:200px;
  font-size:0;
  }
.article_image{
  width:30%;
  height:100%;
  background-color:blue;
  display:inline-block;
}
.article_main{
  width:70%;
  height:100%;
  display:inline-block;
  background-color:green;
}

То все замечательно и я получаю то,что хотел Но стоит только добавить изображение,как article_image едет вниз HTML:

<div class="article">
  <div class="article_image">
    <img src="https://miro.medium.com/max/8452/1*BR2RiTRoYor9xSrzEgxLWQ.jpeg"/>
  </div>
  <div class="article_main">
  </div>
</div>

CSS:

.article{
  width:50%;
  background-color:red;
  height:200px;
  font-size:0;
  }
.article_image{
  width:30%;
  height:100%;
  background-color:blue;
  display:inline-block;
}
.article_main{
  width:70%;
  height:100%;
  display:inline-block;
  background-color:green;
}
.article_image img{
  max-width:100%;
  max-height:100%;
}

Причем добавление float:left; в .article_image все чинит.
Как лучше работать с если нужно растянуть его по размеру div?
Или есть смысл подстраиваться под максимальное значения высоты или ширины для изображения.
Заранее огромное спасибо за ответы.