sidebar-improved.html

<div class="sidebar-title">
    Hades | Hades II
</div>
<div class="sidebar-description">
    The subreddit for Hades and Hades II, the godlike rogue-likes from <span class="text-bold">Supergiant Games</span>.
</div>
<div class="stats-container">
    <div class="stats-section">
        <div class="stats-section-title">
            603K
        </div>
        <div class="stats-section-description">
            Members
        </div>
    </div>
    <div class="stats-section">
        <div class="stats-section-title">
            73
        </div>
        <div class="stats-section-description">
            <img src="https://dimal-dev.github.io/html-css/assets/green-round-dot.png" class="online-image">
            Online
        </div>
    </div>
    <div class="stats-section">
        <div class="stats-section-title">
            Top 1%
        </div>
        <div class="stats-section-description">
            Rank by size
        </div>
    </div>
</div>

<div class="sidebar-image-container">
    <div class="sidebar-image-title">
        Sidebar image
    </div>
    <img src="https://dimal-dev.github.io/html-css/reddit/assets/img/sidebar-image-1.jpg" class="sidebar-image">
</div>

<style>
    .stats-section {
        display: inline-block;
        margin-right: 25px;
    }

    .online-image {
        width: 8px;
    }

    .stats-section-title {
        font-weight: bold;
        font-size: 14px;
    }

    .stats-section-description {
        font-size: 12px;
        color: rgb(87, 111, 118);
        margin-top: 3px;
    }

    .stats-container {
        margin-top: 10px;
    }

    .sidebar-title {
        font-weight: bold;
        color: rgb(42, 60, 66);
        font-size: 14px;
        margin-top: 15px;
        margin-bottom: 5px;
    }

    .sidebar-description {
        color: rgb(87, 111, 118);
        font-size: 14px;
        line-height: 18px;
        width: 250px;
    }

    .text-bold {
        font-weight: bold;
    }

    .sidebar-image-container {
        border-top: 1px solid #ededed;
        margin-top: 4px;
        padding-top: 20px;
        width: 230px;
    }

    .sidebar-image-title {
        text-transform: uppercase;
        color: rgb(87, 111, 118);
        font-size: 15px;
        margin-bottom: 12px;
    }

    .sidebar-image {
        width: 230px;
    }
</style>