title: Absolute Indent of paragraphs in Heading Hierarchy Using CSS
body: <p>I am trying to format a document that consists of a nested hierarchy outline of headings with paragraphs appearing at any level in the hierarchy. This is what I am trying to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/jgBWE.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jgBWE.gif" alt="enter image description here"></a> </p>
  
  <p>The key here is that the Paragraphs need to be indented the same amount irrespective of the level in the hierarch that they appear. So far this is the html and css that I have:</p>
  
  <pre><code>&lt;style&gt;
      .topLevel {
          position: relative;
          font-size: 30px;
      }
      .sublevel {
          position: relative;
          font-size: smaller;
          left: 30px;
      }
      .paragraph {
          position:relative;
          left: 30px;
          font-size: medium;
          color: red;
      }
  &lt;/style&gt;
  
  &lt;div class="topLevel"&gt;
      Heading Level 1
      &lt;div class="sublevel"&gt;
          Heading Level 2
          &lt;div class="paragraph"&gt;Paragraph 1&lt;/div&gt;
          &lt;div class="sublevel"&gt;
              Heading 3
              &lt;div class="paragraph"&gt;Paragraph 2&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The result is this (disregard font differences):</p>
  
  <p><a href="https://i.stack.imgur.com/6cGTP.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6cGTP.gif" alt="enter image description here"></a></p>
  
  <p>Any idea how can I get the left position of the Paragraphs all to be the same while allowing them to appear vertically within the overall document where they belong? Note that the document is dynamic; headings and paragraphs can be added and moved, and the document needs to retain the outline flow as I've indicated. Like a Microsoft Word document for example. Thanks for any assistance.</p>
  
  <p>I should note that due to business logic this is implemented in my application as a tree structure with nodes that can be expanded and collapsed. So the simple solution of using html h1, h2 elements does not seem to be a viable alternative.</p>