文本向左浮动，图像在右侧

对section使用display: flex属性，并将h2p标记放在一个单独的标记中。同样，只需将img元素放在h2p元素下方，如代码片段所示。

您可以在此处阅读有关display: flex的更多信息

section {
display: flex
}
.imgTag{
width:50vw;
height:50vh
}

<section class="post-container">
<span>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum
mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
</span>
<img src="https://pixy.org/src/477/4774988.jpg" class="imgTag" />
</section>

更新：

由于用户在他的代码中需要一些帮助
如果您希望图像大，请为文本使用一些呼吸区域，如增加section的width(1000px)。同时使用display: block和margin: auto进行居中

@import url("https://fonts.googleapis.com/css2?family=Yomogi&family=Zen+Kaku+Gothic+New:wght@300;400;500&display=swap");
:root {
--white: #fff;
--dark-grey: #2f3c4f;
--green: #23966c;
--yellow: #faaa54;
}
body {
background-color: var(--dark-grey);
color: var(--white);
}
h2 {
font-family: "Zen Kaku Gothic New", sans-serif;
text-transform: uppercase;
letter-spacing: 1px;
/* font-size: 40px; */
color: var(--yellow);
}
p {
font-family: "Yomogi", sans-serif;
/* font-size: 30px; */
color: white;
}
section {
display: block;
margin: auto;
width: 1000px;
display: flex;
}
.imgTag {
width: 50vw;
height: 50vh;
}

<section>
<span>
<h2 style="font-size:40px">Lorem Ipsum</h2>
<p style="font-size:30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum
mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
</span>
<img src="https://pixy.org/src/477/4774988.jpg" class="imgTag" />
</section>

使用grid是一个选项。你可以在这里阅读更多关于

.post-container {
display: grid;
grid-template-areas: 
"header image" 
"paragraph image";
}
.post-container>h2 {
grid-area: header;
}
.post-container>p {
grid-area: paragraph;
}
.post-container>img {
grid-area: image;
}

<section class="post-container">
<img src="https://via.placeholder.com/150" />
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum
mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
</section>

使用flex显示。

如果需要图像位于flex容器的左侧，则可以使用row作为section选择器的flex-direction属性的值。

section, div {
display:flex;
flex-direction:row-reverse;
margin:20px;
}
div {
flex-direction:column;
}

<section class="post-container">               
<img src="https://picsum.photos/200/300" />
<div>
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Auctor elit sed vulputate mi sit. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. At urna condimentum mattis pellentesque. Faucibus interdum posuere lorem ipsum dolor. Amet dictum sit amet justo. Diam donec adipiscing tristique risus nec feugiat.</p>
</div>
</section>