您尝试实现的布局看起来非常类似于内置的嵌套列表--文本内容的缩进层，旁边有一个漂亮的小图标。这可以通过在伪选择符之前添加一些边距、填充和：：来轻松实现。

li {
  /* Just illustrating text wrap! */
  max-width: 200px;
}

.list h1 {
  font-size: 1rem;
}

.list p {
  /* If you inspect the user agent stylesheet (basic styles for
     HTML elements provided by the browser) for <ul> and <li>, 
     you will find something similar to the below 
  */
  margin-left: 15px;
  padding-left: 10px;
  
  /* Just illustrating text wrap! */
  max-width: 200px;
}

/* This puts the icon before each of our fake list items, but isn't part of the text area so will float beside it instead of in-line */
.list p::before {
  content: ">";
  position: absolute;
  left: 20px;
}

<ul>
  <li>Gorge<ul>
    <li>A narrow opening between hillsides or mountains...</li>
  </ul></li>
  <li>Ledge<ul>
    <li>a narrow horizontal surface projecting...</li>
  </ul></li>
</ul>

<div class="list">
  <div>
    <h1>Gorge</h1>
    <p>A narrow opening between hillsides or mountains...</p>
    <p>A narrow opening between hillsides or mountains...</p>
  </div>
  
</div>