How can I insert a box between 2 rows? I don't want that box starts at the beginning of a row, I want that start and finish in the middle of a row

Obviously is something more complicated but i'd like a clear and simple description

Image may be NSFW.
Clik here to view.

I tried with grid and flexbox layout, setted "align-self: center" to the right box, but nothing happens, asked to ChatGPT and Perplexity too but I'm stuck.

I just want to display the third box (in a possible flex or grid layout of 3 box) in the right, centered in the middle of first and second left box.

This is the example code:

.container {  display: flex;  flex-wrap: wrap;  width: 100%;  gap: 1.5rem;}.box {  background-color: #fff;  border: 2px solid #000;}.box1,.box2 {  flex: 1 1 calc(60% - 1.5rem);  height: 250px;}.box3 {  flex: 1 1 calc(40% - 1.5rem);  height: 250px;  align-self: center;}

<div class="container"><div class="box box1"></div><div class="box box2"></div><div class="box box3"></div></div>