JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
     <ul>
         <li>Home</li>
         <li>Mitspieler</li>
         <li>Mein Profil</li>
         <li>Whatever</li>
     </ul>
</nav>

<footer>
     <p>Gerade in SA:MP unterwegs</p> 
     <span class='username'>Padarom #1</span>
     <span class='username'>Padarom #2</span>
     <span class='username'>Padarom #3</span>
     <span class='username'>Padarom #4</span>
     <span class='username'>Padarom #5</span>
     <span class='username'>Padarom #6</span>
     <span class='username'>Padarom #7</span>
     <span class='username'>Padarom #8</span>
     <span class='username'>Padarom #9</span>
     <span class='username'>Padarom #10</span>
     <span class='username'>Padarom #11</span>  
     <span class='username'>Padarom #12</span>
     <span class='username'>Padarom #13</span>
     <span class='username'>Padarom #14</span>
     <span class='username'>Padarom #15</span>
</footer>

CSS

body, html {
    padding: 0;
    margin: 0;
    height: 100%;
    font-family: 'Calibri';
}
nav {
    float: left;
    color: white;
    background-color: #222;
    width: 200px;
    min-height: 100%;
}
nav ul {
    list-style: none;
}
footer {
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 200px;
    background-color: #222;
    color: white;
    width: calc(100% - 200px); /* Wichtig! */
}
footer p {
    margin: 10px;
}
footer span {
    float: left; /* Wichtig! */
    width: auto;
    padding: 4px;
    color: white;
    background-color: green;
    border-radius: 2px;
    font-weight: bold;
    font-size: 12px;
    margin: 0 4px 4px 4px;
}