The rows in my flexbox layout are not lining up as desired

Question

I'm trying to create a page that has 2 columns and multiple rows.

I have the CSS below and it is separating them out into 2 columns and multiple rows.

But I'm running into two issues:

• The 2 columns are really far apart.

• The rows do not line up properly if the text contained in either column have different amounts of text.

  For example, I have a row called Description. The left column is just called Description, but the actual contents in the right-side column can be a whole paragraph and this throws off the alignment.

  I have tried played around with float: left and float: right, but that presents the same or similar issues.

  Is there a way to make the rows line up properly?

  Thanks!

Here is my CSS:

#Castle_Properties .column {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
  }

  #Castle_Properties .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

Here is my HTML:

<div id="Castle_Properties">
  <div id="KingHeading">{KingVal}</div> 
  <div className="row">
    <div className="column">
        <div>Country</div>
        <div>Type</div>
        <div>Name</div>
        <div>Description</div>
        <div>Date Built</div>
    </div>
    <div className="column">
        <div>{countryVal}</div>
        <div>{typeVal}</div>
        <div>{nameVal}</div>
        <div>{descVal}</div>
        <div>{builtDateVal}</div>
    </div>
</div>

Answer 1

First set properties for the row since it's the container for the two columns

#Castle_Properties {

} 

.row {
    display : flex;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: center ;
} 

.row div {
    width: 100%;
}

. column {
    display : flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-evenly; 
}

.column div {
    width: 100%;
}

Answer 2

Flex containers are independent, They have no relation to other flex containers on the page, Therefore any grid made with flexbox is not a true grid.

What you're after is a true grid, which can be done with CSS grid a change in the markup is needed.

body * {
  padding: 10px;
  border: 1px solid;
}

[grid] {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-auto-flow: column;
}

[label] {
  grid-column: 1;
}

<div grid>
  <div label>Country</div>
  <div label>Type</div>
  <div label>Name</div>
  <div label>Description</div>
  <div label>Date Built</div>
  <div>{countryVal}</div>
  <div>Lorem ipsum adipisicing</div>
  <div>{nameVal}</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utnt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utnt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utnt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

---

Flexbox solution is to put both rows in a single element.

body * {
  padding: 10px;
  border: 1px solid;
}

[grid] {
  display: flex;
  flex-direction: column;
}

[row] {
  display: flex;
}

[row]>div:nth-child(1) {
  flex: 1 0 0;
}
[row]>div:nth-child(2) {
  flex: 3 0 0;
}

<div grid>
  <div row>
    <div>Country</div>
    <div>{countryVal}</div>
  </div>
  <div row>
    <div>Type</div>
    <div>Lorem ipsum adipisicing</div>
  </div>
  <div row>
    <div>Name</div>
    <div>{nameVal}</div>
  </div>
  <div row>
    <div>Description</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utnt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
  <div row>
    <div>Date Built</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utnt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
      do eiusmod tempor incididunt ut labore et dolore magna aliqua. Utnt in culpa qui officia deserunt mollit anim id est laborum.</div>
  </div>
</div>

And that is the best you can get without specifying any fixed widths