PN Footer

by Patrick Hund

HTML

<div id="flexBox">
    <div id="lime" class="box">
        lime
    </div>
    <div id="fuchsia" class="box">
        fuchsia
    </div>
    <div id="hotpink" class="box">
        hotpink
    </div>
    <div id="chocolate" class="box">
        chocolate
    </div>
</div>

CSS

body {
    font-family: sans-serif;
}
#flexBox {
    display: flex;
    align-items: center;
}

#flexBox div {
    flex-shrink: 1;
}

#flexBox div:first-Child {
    flex-grow: 2;
}

.box {
    padding: 10px;
    margin: 5px;
    border-radius: 12px;
}

#lime {
    background-color: lime;
}

#fuchsia {
    background-color: fuchsia;
}

#hotpink {
    background-color: hotpink;
}

#chocolate {
    background-color: chocolate;
}