Hi @kyashan22
As the list group block is limited you would need to use the div block along with custom classes to build up this structure. The div blocks essentially allows you to build up any component you want in the same way you would if you were writing the code yourself.
To save you some time I have converted your code above into blocks which you can see below. If you edit a page then click the three dots in the top right, then select Code Editor and paste the below in you should see your list group.
<!-- wp:areoi/div {"block_id":"898046e8-3ba1-46f3-840c-c66077bd86c6","className":"list-group"} -->
<!-- wp:areoi/div {"block_id":"70deb6be-4aff-4f86-bc54-731bb6f09ddb","url":"#","className":"list-group-item list-group-item-action active"} -->
<!-- wp:areoi/div {"block_id":"66d79041-8219-4184-97a7-30c4c46813d8","className":"d-flex w-100 justify-content-between"} -->
<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">List group item heading</h5>
<!-- /wp:heading -->
<!-- wp:areoi/div {"block_id":"fc7b4ec1-c052-47fd-9c3a-5f0d43b64add","className":"small"} -->
<!-- wp:paragraph -->
<p>3 days ago</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->
<!-- /wp:areoi/div -->
<!-- wp:paragraph -->
<p>Some placeholder content in a paragraph.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"small"} -->
<p class="small">And some small print.</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->
<!-- wp:areoi/div {"block_id":"3608faba-4c78-42de-8eae-4316833b369e","url":"#","className":"list-group-item list-group-item-action"} -->
<!-- wp:areoi/div {"block_id":"0880704c-c611-4ae3-a6c8-60980d6f72ba","className":"d-flex w-100 justify-content-between"} -->
<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">List group item heading</h5>
<!-- /wp:heading -->
<!-- wp:areoi/div {"block_id":"fc7b4ec1-c052-47fd-9c3a-5f0d43b64add","className":"small"} -->
<!-- wp:paragraph -->
<p>3 days ago</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->
<!-- /wp:areoi/div -->
<!-- wp:paragraph -->
<p>Some placeholder content in a paragraph.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"small"} -->
<p class="small">And some small print.</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->
<!-- wp:areoi/div {"block_id":"c1b6ee18-9fa1-4647-928c-0d3fb4a1355e","url":"#","className":"list-group-item list-group-item-action"} -->
<!-- wp:areoi/div {"block_id":"e0d15af1-dcb7-466f-9a5e-5a4da3397a2a","className":"d-flex w-100 justify-content-between"} -->
<!-- wp:heading {"level":5} -->
<h5 class="wp-block-heading">List group item heading</h5>
<!-- /wp:heading -->
<!-- wp:areoi/div {"block_id":"fc7b4ec1-c052-47fd-9c3a-5f0d43b64add","className":"small"} -->
<!-- wp:paragraph -->
<p>3 days ago</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->
<!-- /wp:areoi/div -->
<!-- wp:paragraph -->
<p>Some placeholder content in a paragraph.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"small"} -->
<p class="small">And some small print.</p>
<!-- /wp:paragraph -->
<!-- /wp:areoi/div -->
<!-- /wp:areoi/div -->
Hopefully you can use this to create whatever component you need. You could then save this as a pattern to make it easily accessible across your site. If you have any other issues, please don’t hesitate to get back in touch.
Thanks
Miles