Я пытаюсь настроить изображение и текст так, чтобы для очень широких окон просмотра текст располагался в двух столбцах, а изображение размещалось в первом столбце. Все это отлично работает, когда текста много, но когда его нет, бывают обстоятельства, когда в тексте вверху второго столбца появляется пробел. Похоже, что отступ изображения каким-то образом перетекает во второй столбец, как показано ниже: 
Очевидно, мне не нужен этот пробел.
Изменение padding-bottom на изображении может показаться, чтобы решить проблему, но затем она снова появляется немного иначе на других устройствах. Требуется более фундаментальное исправление.
CSS не моя сильная сторона, но я потратил целую вечность, пытаясь найти ссылки на подобные проблемы и управлять заполнением и переполнением, но все это пока безрезультатно. Любые подсказки будут оценены.
body {
margin: 0px;
background-color: #ffffff;
color: #333333;
font-family: 'Trebuchet MS', 'Fira Sans', sans-serif;
}
/* Override Bootstrap/Normalize defaults */
h1, .h1 {
font-size: 24px;
}
#titlearea {
text-align: center;
}
#titlearea h1 {
margin-top: 1.0rem;
margin-bottom: 1.0rem;
}
.bio-image {
width: 38%;
}
@media (min-width:768px) {
}
@media (min-width:992px) {
.split2columns {
-webkit-column-count: 2;
-webkit-column-gap: 20px;
-moz-column-count: 2;
-moz-column-gap: 20px;
column-count: 2;
column-gap: 20px;
min-height: 0;
}
}
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Padding Overflow</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i&subset=cyrillic,cyrillic-ext,greek,latin-ext">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body class="zmso-public">
<div class="container">
<div id="titlearea">
<div class="row">
<div class="d-md-none col-8 offset-2">
<img width='100%' src="https://i.postimg.cc/v83szFQ9/image360x540.jpg"/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-10 offset-xl-1">
<h1 class="text-center text-md-left">Title</h1>
</div>
</div>
</div>
<div id="infoarea">
<div class="row">
<div class="split2columns col-xs-12 col-xl-10 offset-xl-1">
<span class="d-none d-md-inline float-md-left pr-md-3 pb-md-3 bio-image"> <img width='100%' src="https://i.postimg.cc/v83szFQ9/image360x540.jpg"/></span>
<div class="rich-text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget nullam non nisi est sit amet facilisis magna. Suspendisse ultrices gravida dictum fusce ut placerat. Tellus in metus vulputate eu scelerisque. Fermentum iaculis eu non diam phasellus vestibulum lorem sed. Non sodales neque sodales ut etiam sit amet. Et ligula ullam corpera futis.</p><p>Non consectetur a erat nam at lectus urna. Dignissim sodales ut eu sem integer vitae justo. Mi in nulla posuere sollicitudin aliquam ultrices. Sed sed risus pretium quam vulputate.</p><p>Id diam vel quam elementum. Eu non diam phasellus vestibulum lorem. Tempus imperdiet nulla malesuada pellentesque elit eget gravida cum sociis.</p></div>
</div>
</div>
</div>
</div>
</body>
</html>
Вам нужно, чтобы окно результатов получилось достаточно широким, чтобы показать проблему. Это легче увидеть в JSFiddle по адресу https://jsfiddle.net/nhsyuqac/. Для меня (на Ma c) он появляется на Firefox, когда окно результатов шире 1200 пикселей, а Chrome шире 992 пикселей (хотя точный шрифт, размер шрифта и высота строки будут влиять на это - оно ведет себя как немного по-другому изначально в браузере по сравнению с JSFiddle.)