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%' and it'll automatically fill the full width of it's parent container.

Example

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%;

}

}

Original Article: https://baillieogrady.com/domino-block/