More fun with flexbox, surround SOME elements in a DIV

[csdude55]

The header flexbox looks like this:

.flex { display: flex }
.flex_ctr {
 align-items: center;
 justify-content: center
}

<div class="flex flex_ctr">
 <p style="flex-basis: 5%">Foo</p>
 <p style="flex-basis: 20%">Bar</p>
 <p style="flex-basis: 55%">Lorem</p>
 <p>Ipsum</p>
</div>

Underneath is a loop, and I need all of the rows to line up with the above. But the problem is that I need Foo, Bar, Lorem, and Ipsum to be clickable.

My original thought was this, but it doesn't work at all:

<div class="flex flex_ctr">
 <p style="flex-basis: 5%">Foo</p>
 <div class="flex flex_ctr" onClick="whatever()">
  <p style="flex-basis: 20%">Bar</p>
  <p style="flex-basis: 55%">Lorem</p>
  <p>Ipsum</p>
 </div>
</div>

You can see it in action here, that's better than my trying to explain what the above does:

[jsfiddle.net...]

Realistically, I know that I could solve this by eliminating that container DIV and putting the onClick() on each <p> element. But the real onClick() is pretty lengthy and I hate to have to duplicate it a bunch of times unnecessarily :-/

Any suggestions on making those rows line up with the header, AND have those elements clickable?

[obankach]

Hi. Add link like <a href="www.example.com">Some link</a> to clickable places.

[edited by: not2easy at 6:40 pm (utc) on Feb 9, 2024]
[edit reason] please use "example.com" [/edit]

[not2easy]

Hi obankach and welcome to WebmasterWorld [webmasterworld.com]

Your solution does not address the question which is about positioning.