Adding content into inline-flex div pushes it down [duplicate] - css

Question

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 1 year ago.
I am trying to order some divs, the idea is that I want to be able to offset them relative to each other to create asymmetrical grid.
All of it is working, until the moment content is added inside.
When a content is added into a div, that div is moved and positioned relative to the content inside it, so that the content is at the top left of the div, I am expecting the opposite behaviour, the div should not move, and the content should move relative to the div.
NOTE: I can not use an outside container to wrap all of them in it.
.column{
width: 49%;
height: 200px;
position: relative;
display: inline-flex;
}
.column:nth-child(2n){
top: 30px;
right: 20px;
}
.column:nth-child(2n - 1){
bottom: 30px;
left: 20px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="column red">
<p>
This breaks it
</p>
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">

Answer 1

If possible you could achieve the expected behavior by wraping the content inside another div and positioning it using position: absolute
.column{
width: 49%;
height: 200px;
position: relative;
display: inline-flex;
}
.column:nth-child(2n){
top: 30px;
right: 20px;
}
.column:nth-child(2n - 1){
bottom: 30px;
left: 20px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.column > div {
position: absolute
}
<div class="column red">
<div>
<p>
This breaks it
</p>
</div>
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">

Answer 2

Why don't you use the old pal float. I still use it over flex and grid often. much easier when simple layouts-
* {box-sizing:border-box;}
.column{
width: 50%;
height: 200px;
float:left;
position:relative;
}
.column:nth-child(2n){
top: 30px;
right: 20px;
}
.column:nth-child(2n - 1){
bottom: 30px;
left: 20px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="column red">
<p>
This breaks it
</p>
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
</div>
<div class="column red">
</div>
<div class="column green">
</div>
<div class="column blue">
Note: I add box-sizing rule becouse I hate that width:49%