0

I have a small screen layout stacked:

[Title Block]
[Image]
[Content Block]

But on larger screens I wish to have this layout:

[Title Block]   [Image]
[Content Block]

The image is rather tall, and the content block should sit directly below the title block.

I've tried using flex:

.container {
    display: flex;
    flex-wrap: wrap;
}

.title-block {
    width: 50%;
}

.image {
    width: 50%;
}

.content-block {
    width: 50%;
}

But there is a gap between the title block and the content block.

How can I produce this layout - is it possible with flex?

https://jsfiddle.net/tjL27c8r/

panthro
  • 22,779
  • 66
  • 183
  • 324
  • I was in the process of demonstrating why this can't be done with flex, but uh, guess people thought they'd close this as a duplicate of a different question which uses grid instead. It's probably how I'd do it too. – Domino Mar 10 '20 at 19:10
  • @Domino the duplicate also demonstrate how it can be done with flexbox – Temani Afif Mar 10 '20 at 19:48

0 Answers0