Ваши две колонки на самом деле уже имеют одинаковую высоту;Вы просто не позволили своему изображению расширяться, чтобы заполнить height контейнера.Чтобы это сделать, просто установите width: 100% и height: 100% на #image img.Имейте в виду, что при этом вы будете искажать пропорции изображения.Если вы хотите сохранить соотношение, вместо этого вам нужно будет указать width: auto, хотя при этом не будет места для фрагментов изображения, когда нет места для его отображения.
Обратите внимание, что вытакже необходимо width из 50% для #image, чтобы как текстовый контейнер, так и контейнер изображений занимал половину width.
Также обратите внимание, что из-за характера текста, занимающегоразное количество линий при разной ширине, высота изображения всегда будет разной.Тем не менее, контейнер всегда будет одинаковой высоты.Я добавил фон к контейнеру, чтобы продемонстрировать это.
Это можно увидеть в следующем.
body {
font-family: arial;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
#text {
width: 50%;
text-align: left;
background: cyan;
}
#image {
width: 50%;
}
#image img {
width: 100%;
height: 100%;
}
.box {
display: flex;
flex-direction: row;
}
<body>
<div class="container">
<div class="box">
<div id="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div id="image">
<img src="http://placehold.it/100">
</div>
</div>
</div>
</body>