You can’t merge half a cell so the top right yellow highlight is impossible. If you are expecting data to suddenly flow around a block to the bottom left (of the top right section) then that can only be achieved with floats but would only work if heights were known beforehand as you can’t specifically float to the bottom.
The second (bottom left) yellow highlight just looks like a colspan which you have already done in the cell above so seems like an odd question
It would probably be more pertinent to see an example with data (or content) so we can see why you need to maintain that pattern? If it’s just a shape with html that you want then that would be possible for a fixed width and height scenario as long as you didn’t want any real content in there.
As I mentioned you can’t actually merge the cells but you could rub out the borders with a pseudo element and then create new borders with more absolutely placed pseudo elements.
There are many other ways to create the illusion of that shape but of course it won’t be able to hold data in any usable way.
I’m on a mobile at the moment so can’t offer code but the methods I suggest are just basic css so shouldn’t be too hard to work out:).