MyBB Community Forums - [Enhanced Account Switcher] Issues modifying Accountlist Page

Problem: I'm struggling pretty bad with the Account List doing what I want. I've got a codepen whipped up, and that's great. And I can get most of the templates appear to be doing what i want but not quite... As you can see from the active page, the characters are all squished together, and then the Player (Master) accounts are chilling out at the bottom of the pack...

Any assistance is greatly appreciated, and thank you for your time <3

Evidence:
Code Pen
Active Page

Special Request: Any guidance on how to fix this to look like the mockup would be outstanding xD

Code: I think this is all of the ones I've edited specifically -

accountswitcher_accountlist

<html>
                    <head>
                        <title>{$settings['bbname']} - {$lang->aj_accountlist}</title>
                        {$headerinclude}
                    </head>
                    <body>
                        {$header}
      
      <div class="WPW-MainBox">
  <div class="WPW-BoxWrap">
       <div class="WPW-AccountList">Account List</div>

<div class="WPW-Rows">   {$accountlist_masterbit}   </div>
   
       </div>
</div>
      
      {$multipage}
                        {$footer}
                    </body>
                </html>

accountswitcher_accountlist_attached

    
   <span class="WPW-Charries">{$attachedAvatar}{$cardbreak}{$attachedlink}</span>

accountswitcher_accountlist_attached_card

   <span class="WPW-Charries">{$attachedAvatar}{$cardbreak}{$attachedlink}</span>

accountswitcher_accountlist_card

<html>
                    <head>
                        <title>{$settings['bbname']} - {$lang->aj_accountlist}</title>
                        {$headerinclude}
                    </head>
                    <body>
                        {$header}
      
  <div class="WPW-Characters">  {$accountlist_masterbit}    </div>
       
      {$multipage}
                        {$footer}
                    </body>
                </html>

accountswitcher_accountlist_master

  <div class="WPW-Player">{$masterAvatar}{$cardbreak}{$masterlink}
    
  </div>

accountswitcher_accountlist_master_card

  <div class="WPW-Player">{$masterAvatar}{$cardbreak}{$masterlink}
    
  </div>

And the CSS;

body {background: #000; font-size: 11px}

.WPW-MainBox {min-width: 90%; margin: auto; background: #3d5c5c; padding: 10px;}

.WPW-Rows {display: flex; flex-wrap: wrap}

.WPW-BoxWrap {background: #d1e0e0}

.WPW-AccountList {background: #1f2e2e; font-size: 20px; text-transform: lowercase; padding: 4px 10px; color: #FFF;}

.WPW-Player {background: #669999; max-width: 250px; min-height: 500px; flex-basis: 20%; flex-grow: 1; padding: 5px; order: 2; text-align: center;}

.WPW-Characters {background: #a3c2c2; flex-basis: 30%; flex-grow: 3; display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 5px; order: 6}

/*background: #b3cccc; flex-basis: 30%; flex-grow: 3; padding: 5px; color: #1f2e2e; order: 3;*/

.WPW-Charries {background: #1f2e2e; flex-basis: 5%; min-width: 250px; height: 500px; flex-wrap: wrap; padding: 4px; color: #FFF; text-align: center; margin: 0.5%;}

Giving this a light bump Smile

Still need any available help <3

I've been playing around some more, and the issue appears to be (I think) that I only need one DIV in the Attached_Card template, but I cannot figure out where to put it instead, to retain the effect I want. So it needs to look like the code at the far bottom, which is in my codepen:

accountswitcher_accountlist_card

<html>
                    <head>
                        <title>{$settings['bbname']} - {$lang->aj_accountlist}</title>
                        {$headerinclude}
                    </head>
	    <body>
                        {$header}
	
	<div class="WPW-MainBox">
  <div class="WPW-BoxWrap">
	  
       <div class="WPW-AccountList">Account List</div>

 {$accountlist_masterbit}

 
       </div>
</div>
			</div>

{$multipage}
                        {$footer}
                    </body>
                </html>

accountswitcher_accountlist_master_card

<div class="WPW-Rows">
	<div class="WPW-Player">
	  <div class="pb_sticky">
		  {$masterAvatar}{$masterlink}	{$cardbreak}
	  </div>
</div>

accountswitcher_accountlist_attached_card

 <div class="WPW-Characters">
	 <span class="WPW-Charries">
		  {$attachedAvatar}
		  {$attachedlink}
	  </span>
</div>

Codepen -- https://codepen.io/ThistleProse/pen/JjGL...itors=1000

<html>
                    <head>
                        <title>{$settings['bbname']} - {$lang->aj_accountlist}</title>
                        {$headerinclude}
                    </head>
	    <body>
                        {$header}
	
	<div class="WPW-MainBox">
  <div class="WPW-BoxWrap">
	  
       <div class="WPW-AccountList">Account List</div>

<div class="WPW-Rows">
	<div class="WPW-Player">
	  <div class="pb_sticky">
	  {$masterAvatar}{$masterlink}
	  </div>
</div>
  
  <div class="WPW-Characters">              <---- Only one 'DIV' until the end of the collection of attached accounts
	  <span class="WPW-Charries">
		  {$attachedAvatar}
		  {$attachedlink}
	  </span>
	  <span class="WPW-Charries">
		  {$attachedAvatar}
		  {$attachedlink}
	  </span>
	  <span class="WPW-Charries">
		  {$attachedAvatar}
		  {$attachedlink}
	  </span>
</div>
    </div>
  
    
    <div class="WPW-Rows">
	<div class="WPW-Player">
	  <div class="pb_sticky">
	  {$masterAvatar}{$masterlink}
	  </div>
</div>
  
  <div class="WPW-Characters">
	  <span class="WPW-Charries">
		  {$attachedAvatar}
		  {$attachedlink}
	  </span>
</div>
    </div>
    
 <div class="WPW-Rows">
	<div class="WPW-Player">
	  <div class="pb_sticky">
	  {$masterAvatar}{$masterlink}
	  </div>
</div>
  
  <div class="WPW-Characters">
	  <span class="WPW-Charries">
		  {$attachedAvatar}
		  {$attachedlink}
	  </span>
	  <span class="WPW-Charries">
		  {$attachedAvatar}
		  {$attachedlink}
	  </span>
	  <span class="WPW-Charries">
		  {$attachedAvatar}
		  {$attachedlink}
	  </span>
</div>
    </div>
    
    
       </div>
</div>

{$multipage}
                        {$footer}
                    </body>
                </html>