title: Set a fixed margin between list component
body: <p>I'm using a Material UI list component in my code.</p>
  <p>Here is the code snippet:</p>
  <pre><code>&lt;List&gt;
      &lt;ListItem button&gt;
        &lt;ListItemText
          disableTypography
          primary={&lt;Typography&gt;Hello&lt;/Typography&gt;}
        /&gt;
        &lt;p&gt;John&lt;/p&gt;
        &lt;DraftsIcon /&gt;
      &lt;/ListItem&gt;
    &lt;/List&gt;
  </code></pre>
  <p>Here is the screenshot of the result:
  <a href="https://i.stack.imgur.com/UJckZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UJckZ.png" alt="enter image description here" /></a></p>
  <p>How can I set a fixed distance between &quot;Hello&quot; and &quot;John&quot;?</p>
  <p>and avoid the following case:</p>
  <p><a href="https://i.stack.imgur.com/gjtKU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gjtKU.png" alt="enter image description here" /></a></p>