Cannot get grid items to stack in right column

I am trying to get grid items (nested divs) to stack in the right column beside the circle.

The div containing the circle is set to 50% width as are the subsequent grid items. I would have expected them to all stack nicely in the right column beside the circle like this.

But what I am getting is this:

It seems that second grid item is somehow defaulting to the full height of the circle rather than tight around the team member name — so there is no room for the next items to stack underneath it. Or at least this is what I understand is going on.

I can’t see what I am doing wrong.

I would like to get the next elements to stack under the team member name in the right column as per the design.

Any help would be greatly appreciated. Thanks in advance.

William


Here is my site Read-Only