JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="wide">Prio 1
        <br/>The divs can be of different height.
        <br/>Under this div it would be great if "Prio 6" would position itself.</div>
    <div class="narrow">Prio 2</div>
    <div class="narrow">Prio 3
        <br/>A div on the right hand side can also differ in height.</div>
    <div class="narrow">Prio 4</div>
    <div class="narrow">Prio 5</div>
    <div class="wide">Prio 6</div>
    <div class="wide">Prio 7</div>
    <div class="wide">Prio 8</div>
    <div class="wide">Prio 9</div>
    <div class="narrow">Prio 10</div>
</div>

CSS

*, *:after, *:before {
    margin: 0;
    padding: 0;
}
.wrapper {
    display:flex;
    flex-direction:column;
}
.wide {
    order:0;
    background: gray;
    display:inline-block;
    width: 79%; /* Even if this is lowered it doesn't work */
    border:solid 1px;
}
.narrow {
    order:1;
    align-self:flex-end;
    position:relative;
    top:-150px;
    background: green;
    display:inline-block;
    width: 20%;
    border:solid 1px;
}