Как центрировать многострочный текст на изображении переменной ширины

Извините, но это, скорее всего, вопрос типа «нуби»,

Я хочу, чтобы заголовок и какой-то текст абзаца центрировались по сторонам изображения переменной ширины. Чтобы добавить к веселью, текст должен быть в состоянии расположить или слева или справа от изображения, но в HTML он всегда будет первым. (это так, чтобы я мог сложить их на мобильном дисплее с помощью медиа-запроса)

Я пробовал разные вещи, включая использование display: table, но он перестает работать, если я перемещаю изображение.

Я мог бы использовать PHP в WordPress, чтобы установить ширину текстового div в («ширина страницы» — «ширина изображения»), но наверняка должен быть лучший способ?

    <!-- text left-->
<div class="l">
<div class="td">
<h2>History</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, excepturi, tenetur deleniti nemo animi repudiandae. Soluta, quia quod magnam nobis!</p>
</div>
<div class="">
<img src="https://web-answers.ru/wp-content/uploads/2019/03/History.jpg"  alt="Our History"><!-- class="img-responsive" -->
<div style="clear: both;"></div>
</div>
</div>
<!-- text right-->
<div class="r">
<div class="td">
<h2>History</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, excepturi, tenetur deleniti nemo animi repudiandae. Soluta, quia quod magnam nobis! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque, officiis deserunt dolor dolorem voluptas distinctio nostrum nihil natus consequatur sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique sunt doloremque fugit quidem aliquam iure dolor maiores voluptate? Similique, nesciunt, ex, unde, quos porro cum quasi facere dolorem eaque incidunt praesentium totam beatae voluptas velit voluptatum maxime officiis suscipit quis iste quisquam molestiae cumque error laudantium corporis vel et sapiente expedita adipisci accusantium doloribus. Fuga quisquam dolore officiis ipsa reprehenderit quae sapiente reiciendis! Ea, recusandae, ab, accusantium, natus eligendi officia laboriosam quo sed odit dolorem asperiores in libero placeat vitae quae. Itaque, iusto quo harum deserunt quidem laboriosam commodi dicta natus voluptate asperiores debitis tempora distinctio officia odio consectetur vero.</p>
</div>
<div class="">
<img src="https://web-answers.ru/wp-content/uploads/2019/03/History.jpg"  alt="Our History">
</div>
</div>

CSS:

* {
box-sizing:border-box;
}

.l,.r {
/*  display: table;  */
width:100%;
/* height: 421px; */
}

.l .td {
width:38%;
float:left;
position:absolute;
top:50%;
/*  height: 421px; */
margin-top:-100px;
/*  float:left; */
/*
display: table-cell;
display:table-cell!important;
vertical-align:middle;
*/
/*  float:none; */
}

.l img {
float:right;
width:62%;
}

.r,.l {
position:relative;
}

.r .td {
width:38%;
position:absolute;
top:50%;
height:60%;
margin-top:-100px;
right:0;
}

.r img {
width:62%;
}

.l .td,.r .td {
padding-left:5%;
padding-right:5%;
max-height:100%;
overflow:auto;
}