Domino block

A quite a popular block in web development is what I like to call the domino. It consists of two boxes seamlessly sitting side by side which usually both share the same height and width, hence the creative name of domino. For this example I’ve used flexbox. Also, notice how simple it is to make this type of block responsive. Simply set the flex basis to ‘1 0 100%’ at your tablet/mobile break point and it’ll automatically fill the full width of it’s parent container.

Example

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

HTML

<div class="domino">
    <div class="domino__box">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
    </div>
    <div class="domino__box">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
    </div>
</div>

CSS

.domino {
    display: flex;
}

.domino__box {
    flex:0 0 50%;
    padding: 50px;
}

.domino__box:first-child {
    background-color: honeydew;
}

.domino__box:last-child {
    background-color: lavender;
}

@media only screen and (max-width: 1024px) {
    .domino {
        flex-wrap: wrap;
    }
    .domino__box {
        flex: 1 0 100%;
      }
}

Helpful?

I really enjoy writing these articles and any support will only fuel me to create more. You can support me here, all the proceeds will most likely buy coffee or another infamous laptop dongle.