Editing HTML structure of Gutenberg layout recent post?

I used gutenberg layout method with wordpress editor to call recent posts. WordPress automatically generated this HTML structure.

<ul class="wp-block-latest-posts__list has-dates wp-block-latest-posts">    <li>      <div class="wp-block-latest-posts__featured-image">        <img loading="lazy" width="1024" height="663" src="" alt="" class="wp-image-73"              srcset="" sizes="(max-width: 1024px) 100vw, 1024px">      </div>      <a href="">SOME TEXT</a>      <time datetime="2021-05-08T17:21:16+00:00" class="wp-block-latest-posts__post-date">May 8,             2021</time>      <div class="wp-block-latest-posts__post-excerpt">SOME TEXT</div>    </li> </ul> 

Now I need to group anchor, time and the last div tag in another div tag for my CSS design. Problem is I do not know how to edit html structure of recent post with wordpress editor. Should I code?

[![enter image description here][1]][1]

clicking over SOME POST doesn’t give me a chance to create a new div there.. I use underscore theme.

I DON’T WANT USE PLUGINS IF IT IS POSSIBLE WITHOUT PLUGIN [1]: https://i.stack.imgur.com/5ZSPS.png