Display HTML code in two columns, actual tags

Question

PS: Total Beginner

How do i get to display html code in 2 columns so browser reads it as normal text?

My columns wont display properly, and the " ... " not displaying properly either, I need it to have 2 space spots on each side, but browser only displays one, here is the code in HTML i have so far:

span {
  font-family: Courier New;
  monospace;
  font-size: 23px;
  color: rgb(215, 104, 113);
}

body {
  background-color: rgb(40, 44, 52);
  color: white;
}

.row {
  display: flex;
}

.column {
  flex: 50%;
}

<div class="section_body">
  <h2 class="section">Document Summary</h2>

  <div class="row">

    <div class="column"></div>
    <h3>&lt;<span>html1</span>&gt;...&lt;<span>/html1</span>&gt;</h3>
    <div class="column"></div>
    <h3>&lt;<span>html2</span>&gt; ... &lt;<span>/html2</span>&gt;</h3>

  </div>

</div>

<!-- begin snippet: js hide: false console: true babel: false -->

Disclosure: this is a snip from someone who made an HTML Cheat Sheet and I am just trying to recreate it in HTML & CSS as practice since i am a beginner. Thank you.

Snip of the HTML Cheat Sheet

Answer 1

You can use this code

body {
            margin: 0;
            padding: 0;
            background-color: #282c34;
            color: white;
            font-family: Roboto;
        }
        * {
            box-sizing: border-box;
        }
        .column {
            float: left;
            width: 50%;
            padding: 50px;
            height: 300px;
        }
        .row:after {
            content: "";
            display: table;
            clear: both;
        }
        span {
            font-family: Courier New;
            font-size: 23px;
            color: rgb(215, 104, 113);
        }
        h2 {
            text-align: center;
            background-color: #2c323c;
            padding: 10px;
            color: #abb2bf;
        }
        p {
            line-height: 25px;
        }

    <div class="section_body">
        <h2 class="section">Document Summary</h2>
        <div class="row">
            <div class="column">
                <h3>&lt;<span>html</span>&gt;...&lt;<span>/html</span>&gt;</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat lectus a ante vestibulum elementum. Quisque velit purus, bibendum non auctor sed, facilisis ac mauris. Nam porttitor ligula mi, eu feugiat metus bibendum quis. Etiam mollis mi non mi molestie tristique. Nunc ultricies aliquam hendrerit. Etiam lacinia iaculis velit, ut egestas orci efficitur non. Nullam maximus ligula sit amet feugiat tempus.</p>
            </div>
            <div class="column">
                <h3>&lt;<span>title</span>&gt; ... &lt;<span>/title</span>&gt;</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat lectus a ante vestibulum elementum. Quisque velit purus, bibendum non auctor sed, facilisis ac mauris. Nam porttitor ligula mi, eu feugiat metus bibendum quis. Etiam mollis mi non mi molestie tristique. Nunc ultricies aliquam hendrerit. Etiam lacinia iaculis velit, ut egestas orci efficitur non. Nullam maximus ligula sit amet feugiat tempus.</p>
            </div>
            <div class="column">
                <h3>&lt;<span>head</span>&gt;...&lt;<span>/head</span>&gt;</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat lectus a ante vestibulum elementum. Quisque velit purus, bibendum non auctor sed, facilisis ac mauris. Nam porttitor ligula mi, eu feugiat metus bibendum quis. Etiam mollis mi non mi molestie tristique. Nunc ultricies aliquam hendrerit. Etiam lacinia iaculis velit, ut egestas orci efficitur non. Nullam maximus ligula sit amet feugiat tempus.</p>
            </div>
            <div class="column">
                <h3>&lt;<span>body</span>&gt; ... &lt;<span>/body</span>&gt;</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat lectus a ante vestibulum elementum. Quisque velit purus, bibendum non auctor sed, facilisis ac mauris. Nam porttitor ligula mi, eu feugiat metus bibendum quis. Etiam mollis mi non mi molestie tristique. Nunc ultricies aliquam hendrerit. Etiam lacinia iaculis velit, ut egestas orci efficitur non. Nullam maximus ligula sit amet feugiat tempus.</p>
            </div>
        </div>
    </div>

Answer 2

Your columns are working correctly; you just haven't placed your content inside of the container divs. Please see below for a working copy, and keep up the hard work in learning the language!

span {
  font-family: Courier New;
  font-size: 23px;
  color: rgb(215, 104, 113);
}

body {
  background-color: rgb(40, 44, 52);
  color: white;
}

.row {
  display: flex;
  flex-direction:row;
  justify-content:center;
}

.column {
  flex: 48%;
  margin:0 1%;
}

<div class="section_body">
  <h2 class="section">Document Summary</h2>
  <div class="row">

    <div class="column">
      <h3>&lt;<span>html</span>&gt; ... &lt;<span>/html</span>&gt;</h3>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
      </p>
    </div>
    
    <div class="column">
      <h3>&lt;<span>html</span>&gt; ... &lt;<span>/html</span>&gt;</h3>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div>
    
  </div>
</div>

JSFiddle

Answer 3

Indeed, your content was out of the 2 column divs. That should work better.

<div class="section_body">
  <h2 class="section">Document Summary</h2>

  <div class="row">

    <div class="column">
       <h3>&lt;<span>html1</span>&gt;...&lt;<span>/html1</span>&gt;</h3>
    </div>
    
    <div class="column">
       <h3>&lt;<span>html2</span>&gt; ... &lt;<span>/html2</span>&gt;</h3>
    </div>
    
  </div>

</div>