'Aligning child div vertically instead of relative to parent div's content

My issue is with aligning the right content box (which displays the user list) at the top of the parent div, which is class Content-Row. The left content box and right content box are inside 'Content-Row'.

I have tried using the vertical-align css property, and tried switching display to grid, grid is behaving the same as flex.

screenshot

  .Content-Row {
    width: 100%;
    padding-top: 5px;
    display: flex;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 15px;
  }
  .Content-Box-Right {
    border-radius: 7px;
    background: ${({ theme }) => theme.contentBox.background};
    width: 30%;
    padding: 10px;
    margin-left: 6px;
    margin: auto;
    box-shadow: ${({ theme }) => theme.contentBox.shadow};
    vertical-align: top;
  }
  .Content-Box-Left {
    border-radius: 7px;
    background: ${({ theme }) => theme.contentBox.background};
    width: 50%;
    padding: 10px;
    margin-right: 6px;
    margin: auto;
    box-shadow: ${({ theme }) => theme.contentBox.shadow};
    vertical-align: top;
  }
css


Solution 1:[1]

.Content-Row {
    ...
    align-items: flex-start;
    ...
}

Aligning the items to the start of the flexbox when it is flex-direction: row; (which is default) should get you what you want.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Matt Rose

Related Questions