Как расположить картинку с div'ом в одну строку?

С inline-block между элементами ставится "пробел", поэтому в вашем случае div просто не влезает в ширину контейнера.

Поставьте контейнеру font-size: 0, а в дочерних элементах верните размер шрифта на место, и все будет ок.

UPD:
Кроме того, нужно добавить вот это:

#container img {
    vertical-align: top;
 }

Вот полный код CSS (html из вопроса):

body {
      background: #e5e9ff;
    }
    
    #container {
      width: 687px;
      height: 394px;
      background: #f4f5fa;
      font-size: 0;
    }
    
    #container img {
      width: 369px;
      height: 394px;
      vertical-align: top;
    }
    
    #container .right {
      background: #777;
      width: 318px;
      height: 394px;
      display: inline-block;
      font-size: 14px;
    }

родителю написать : display:flex; align-items:center;