Css: Two Columns

CSS: how to organize two columns in a way that one column overlays above the other?

Since you want the sidebar to "cover" the svg area (content) it needs to have position: absolute. Here is an example:

function toggle () {
  const sidebar = document.querySelector('.test.column');
  sidebar.classList.toggle('hide');
}

html, body, main {
  height: 100vh;
}
.svg_container {
    width: 100%;
    background: #fff;
    height: 100%;
}

.test.column {
    background-color: gray;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    flex-direction: column;
    flex-basis: 100%;
    flex: 1;
    border: 2px solid pink;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 200px;
}

.column.hide {
  display: none;
}

.content {
  background-color: teal;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.svg {
    width: 100%;
    flex: 5;
    height: 90vh;
}

<html>
<body>
<main>
  <div class="svg_container">
      <div class="test column">
        <p>List Header</p>
        <p>Elem 1</p>
        <p>Elem 2</p>
        <p>Elem 3</p>
        <p>Elem 4</p>
        <p>Elem 5</p>
      </div>
      <div class="content">
        <button onclick="toggle()"> Show/Hide </button>
      </div>
    </div>
  </div>
</main>
</body>
</html>

Four items in two columns

The CSS for the wrapper is correct. The only thing you need to specify is from which line of the grid should each item start and end.

.item-1, 
.item-2{
grid-column: 1/2;
width: 100%;
}

.item-3, 
.item-4{
grid-column: 3/4;
width: 100%;
}

how to align two columns in a row CSS

Each column should have the same flex-basis, and since you want two columns, a 50% flex-basis works fine. I use the flex shorthand below to also tell the browser that flex-grow is not allowed while flex-shrink is allowed, which works well with your flex-wrap declaration on the parent (.row).

That gets you most of the way, but your buttons were still displayed inline, which caused them to stack in an undesirable way and to be inconsistent widths. Setting them to display: block fixes both issues, and allows you to drop the width: 100% that wasn't being followed anyways.

I removed the responsive adaptations because they were interfering with the presentation on StackOverflow.

section {

  background-color: #ede6c1;

  padding: 15px;

  text-align: center;

}

article {

  padding: 10px;

  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.row {

  display: -ms-flexbox; /* IE10 */

  display: flex;

  justify-content: center;

}

.column {

  -ms-flex: 50%; /* IE10 */

  flex: 0 1 auto;

  margin: 30px;

}

.menu-button {

  display: block;

  box-sizing: border-box;

  background-color: rgba(85, 100, 83, 0.8);

  padding: 20px 0;

  font-size: 30px;

  margin: 10px 0;

  width: 200px;

  border-radius: 25px;

  box-shadow: 5px 5px 5px rgba(71, 69, 69, 0.787);

}

.menu-button:hover {

  box-shadow: 1px 1px 1px rgba(71, 69, 69, 0.787);

  color: black;

}

a {

  color: black;

  text-decoration: none;

}

a:hover {

  color: rgba(71, 69, 69, 0.787);

  text-decoration: none;

}

<section>

  <article>

    <h1>Seattle Colours</h1>

    <div class="row">

      <div class="column">

        <a class="menu-button" href="../Wood-Type/index-wood-type.html" role="button">Wood type</a>

        <a class="menu-button" href="../Wood-Type/.html" role="button">Specification</a>

        <a class="menu-button" href="../Wood-Type/.html" role="button">Pricing</a>

      </div>

      <div class="column">

        <a class="menu-button" href="../Wood-Type/.html" role="button">News</a>

        <a class="menu-button" href="../Wood-Type/.html" role="button">FAQ</a>

        <a class="menu-button" href="../Wood-Type/index-wood-type.html" role="button">Images</a>

      </div>

    </div>

  </article>

</section>

Tailwind CSS - how to make a grid with two columns where the 1st column has 20% of the width and 2nd one 80% width?

Set grid-cols-5 to the wrapper and col-span-4 to second column. It will cover 4/5 (80%)

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css" />

<div class="grid grid-cols-5 gap-3">
  <div class="bg-blue-100">1st col</div>
  <div class="bg-red-100 col-span-4">2nd col</div>
</div>

How can I create multi columns from a single unordered list?

Yes, you can create a multi column list as described if you make the ul a flex container, change the flex-direction to column, allow it to wrap by applying flex-wrap: wrap and additionally force it to wrap by limiting its height:

ul {
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li>item 6</li>
  <li>item 7</li>
  <li>item 8</li>
  <li>item 9</li>
  <li>item 10</li>
  <li>item 11</li>
  <li>item 12</li>
  <li>item 13</li>
  <li>item 14</li>
  <li>item 15</li>
  <li>item 16</li>
  <li>item 17</li>
  <li>item 18 </li>
  <li>item 19</li>
  <li>item 20</li>
  <li>item 21</li>
</ul>

A two-column layout with different order of elements when transformed into one-column layout

UPDATE: My original answer claimed that this could not be done with CSS alone. While this is true of the general 'masonry' case, in the case of a maximum of just two columns as in the question it can be done with use of floats.

Here's a snippet using the HTML from the question unaltered. You will need a clear:both after it (if clearing both columns before the next content is required).

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  width: 80%;
  /* set for this test - obviously set to what is required */
}

.wrapper:nth-child(1) div:nth-child(n) {
  width: 50%;
}

.wrapper:nth-child(1) div:nth-child(odd) {
  float: left;
}

.wrapper:nth-child(1) div:nth-child(even) {
  float: right;
}

.a {
  background-color: magenta;
}

.b {
  background-color: red;
}

.c {
  background-color: yellow;
}

.d {
  background-color: orange;
}

@media screen and (max-width: 600px) {
  .wrapper {
    width: 100%;
  }
  .wrapper:nth-child(1) div:nth-child(n) {
    width: 100%;
  }
  .wrapper:nth-child(1) div:nth-child(odd) {
    float: left;
  }
  .wrapper:nth-child(1) div:nth-child(even) {
    float: left;
  }
}

<div class="wrapper">
  <div class="a">
    <h1>A</h1>
  </div>
  <div class="b">
    <h1>B</h1>
    <p>lorem ipsum dolor</p>
    <p>amet</p>
  </div>
  <div class="c">
    <h1>C</h1>
    <p>lorem </p>
    <p>ipsum</p>
    <p>dolor</p>
  </div>
  <div class="d">
    <h1>D</h1>
  </div>
</div>

How to structure content dynamically in 2 columns

You can try using flexbox layouts in such cases.

{
    display: flex
}

To divide the the content in 2 columns, you may use

flex-direction: row
column-gap: 12px (whatever is your requirement)

and to align items in a stack in each column, you may use

flex-direction: column
row-gap: 12px

You can checkout other flexbox layout css to customise it according to your needs.