Question: I am trying to use flexbox like floats. I would like 1 child to form a column on the right and the remaining children to form another column on the left. I can't add in additional HTML -- I can only work with CSS.

I've figured out how to do this, but **I just need both columns to align at the top**. My current code has the left column slightly below the right column.

<https://jsfiddle.net/o2fbtuLc/>

```css
.parent {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.child {
  max-width: 48%;
}

.right {
  margin-left: auto;
}
```

```html
<div class="parent">
  <div class="child right">Right</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
</div>
```

Answer: 
You can use [`order`](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items). Also I removed `flex-direction: column` and added `max-width: 100%` for elements after second element.

```css
.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 100%;
  max-width: 48%;
}

.child:nth-child(2) {
  order: 1;
}

.child:nth-child(3) {
  order: 3;
}

.child:nth-child(4) {
  order: 4;
}

.right {
  order: 2;
}

.child:nth-child(n + 3) {
  max-width: 100%;
}
```

```html
<div class="parent">
  <div class="child right">Right</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
</div>
```

If `.right` is taller, we can consider using `grid-area`.

```css
.parent {
  display: grid;
  grid-template-areas:  "left1 right" 
                        "left2 right" 
                        "left3 right";
}

.child {
  width: 100%;
  background: blue;
  height: 30px;
}

.child:nth-child(2) {
  grid-area: left1;
}

.child:nth-child(3) {
  grid-area: left2;
}

.child:nth-child(4) {
  grid-area: left3;
}

.right {
  background: red;
  height: 80px;
  grid-area: right;
}
```

```html
<div class="parent">
  <div class="child right">Right</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
</div>
```
CSS-Grid can do that:

```css
.parent {
  display: grid;
  grid-template-columns: auto auto;
  grid-auto-flow: column;
}

.child {
  max-width: 48%;
  grid-column: 1;
  border: 1px solid green;
}

.right {
  grid-column: 2;
}
```

```html
<div class="parent">
  <div class="child right">Right</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
  <div class="child">Left</div>
  <div class="child right">Right</div>
</div>
```