JSFiddle - React, Tailwind, and code Playground

by Netsurfer

HTML

<div class="module v1">
    <header class="module-header">
        <h1>V1: Foo<br/>multiline</h1>
    </header>
    <figure class="module-keyvisual">
        <img src="http://placehold.it/400x100"/>
    </figure>
    <div class="module-body">
        <p>
            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, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
    </div>
</div>

<div class="module v2">
    <header class="module-header">
        <h1>V2: Foo<br/>multiline</h1>
    </header>
    <figure class="module-keyvisual">
        <img src="http://placehold.it/400x100"/>
    </figure>
    <div class="module-body">
        <p>
            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, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
    </div>
</div>

<div class="module v3">
    <header class="module-header">
        <h1>V3: Foo Funktioniert nicht bei besonders langen Ăśberschriften, wie dieser hier<br/>
multiline</h1>
    </header>
    <figure class="module-keyvisual">
        <img src="http://placehold.it/100x100"/>
    </figure>
    <div class="module-body">
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua....

CSS

body {
    padding: 2em;
}
figure {
    margin: 0;
    display: block;
}
h1 {
    font-size: 18px;
    font-weight: bold;
}
.module {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 1em;
    max-width: 400px;
    position: relative;
}

/* V2 */
.module.v2 .module-header {
    position: relative;
    top: 100px;
}
.module.v2 .module-keyvisual {
    height: 100px;
}
.module.v2 .module-keyvisual img {
    position: absolute;
    top: 10px;
}

/* V3 */
.module.v3 .module-header {
    
    
}
.module.v3 .module-keyvisual {
    position: absolute;
top: 10px;
}
.module.v3 .module-header:before {
    float: left;
    content: "";
    width: 110px;
    height: 110px;
}

/* V4 */
.module.v4 .module-keyvisual {
    float: left;
    margin: 0 10px 10px 0;
}