HTML
<div class="custom-userlinks-outer">
<div class="guest">
<div class="userlink-img">
<img style="width: 50px; height: 50px;" src="https://i.postimg.cc/gkbyh4LQ/coopg05.gif"/>
</div>
<div class="userlink-name">
welcome,<br/> <span>guest!</span>
</div>
<div class="userlink-button">
<a href="">register</a>
</div>
<div class="userlink-button">
<a href="">login</a>
</div>
</div>
<div class="guest">
<div class="userlink-img">
<img style="width: 50px; height: 50px;" src="https://i.postimg.cc/gkbyh4LQ/coopg05.gif"/>
</div>
<div class="userlink-name">
welcome,<br/> <span> <a href="index.php?showuser=<!-- |id| -->"><!-- |prefix| --><!-- |name| --><!-- |suffix| --></a></span>
</div>
<div class="userlink-usebutton">
<a href="index.php?act=Msg&CODE=01">messages(<!-- |new_msg| -->)</a>
</div>
<div class="userlink-usebutton">
<a href="index.php?act=UserCP&CODE=alerts"> alerts
<span class="alert<!-- |new_alerts| -->"> (<!-- |new_alerts| -->)</span>
</a>
</div>
<div class="userlink-usebutton">
<a href="index.php?act=UserCP&CODE=26">tracked topics</a>
</div>
<div class="userlink-usebutton">
<a href="index.php?act=UserCP">ucp</a>
</div>
<div class="userlink-usebutton">
<span id='sub_bar_2' style="display:none;"><% SUBACCOUNTS %></span><span id='subacct_link_2'><a href='javascript:void(0);' onclick="document.getElementById('subacct_link_2').innerHTML=document.getElementById('sub_bar_2').innerHTML;">Switch Account</a></span>
</div>
</div>
</div>
CSS
.guest {
display: flex;
flex-direction: row;
column-gap: 30px;
align-items: ;
}
.userlink-img {
width: 50px;
height: 50px;
border-radius: 10px;
border: 5px solid red;
}
.userlink-img img {
border-radius: 5px;
}
.userlink-name {
background-color: yellow;
padding: 10px;
text-align: right;
height: 30px;
}
.userlink-name span{
color: red;
font-weight: bold;
}
.userlink-button {
background-color: red;
padding: 10px;
border-radius: 10px;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
}
.userlink-usebutton {
width: 35px;
height: 35px;
background-color: red;
border-radius: 10px;
margin-top: 10px;
}
