CSS新手求教左图右文垂直居中布局的实现学习方向

我想要给元素设置左图右文的样式，且文本需要垂直居中对齐。我对CSS非常不熟悉，完全不知道从何入手，尝试过在线搜索但不清楚该搜索什么关键词，可参考下方效果图。

<div class="flex w-full h-screen items-center justify-center text-center" id="app">
        <div style="border-color: #8FC8E7; background-color: #F5F5F9;"
             @dragover="dragover"
             @dragleave="dragleave"
             @drop="drop">

            <input type="file"
                   multiple name="fields[assetsFieldHandle][]"
                   id="assetsFieldHandle"
                   class="w-px h-px opacity-0 overflow-hidden absolute ajaxFileUpload"
                   style="visibility: hidden"
                   @change="onChange"
                   ref="file" accept=".pdf,.jpg,.jpeg,.png" />

            <label for="assetsFieldHandle"
                   class="block cursor-pointer"
                   style="color: #4E5359">
                <div>
                    拖拽图片到该框，或<span style="color: #65B3DD;">点击此处</span>选择文件。
                </div>
            </label>
        </div>
</div>

• 不需要直接提供写好的CSS代码，更希望理解实现的逻辑与原理
• 希望获知可用于搜索的相关关键词
• 需要正确的相关学习方向指引

内容的提问来源于stack exchange，提问作者Skytiger