HTML&CSSでバナーの配置を実現したい

前提

HTML&CSSでバナー配置

実現したいこと

HTMLとCSSで画像の様な配置を実現したいのですが、書き方がわからず助けていただけないでしょうか。

該当のソースコード

<div class="p-point__num"> <ul class="flow" style="display: flex;"> 　　<li class="flow_item" style="width: 50%;">STEP</li> 　　<li class="flow_item" style="width: 50%;">&nbsp;</li> </ul> <ul class="flow" style="display: flex;"> <li class="flow_item" style="width: 50%;">1</li> <li class="flow_item" style="width: 50%;">オリエンテーション</li> </ul> <img class="bannar_img" src="<?php echo get_stylesheet_directory_uri(); ?>/images/bannar/back_img1.jpg" loading="lazy" width="1100" height="368" alt="6つのポイント背景画像"> </div>

試したこと

flexを使って１「１」の右側に「オリエンテーション」を配置するように試みたのですが4分割はできたのですが配置調整ができていません。