title: Material UI Aligning Checkbox
body: <p>How would I go about aligning my checkbox vertically to the Calender element. It's always down to the right where it's supposed to due to padding. Or the invites not aligned.</p>
  <p><a href="https://i.stack.imgur.com/kBG58.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kBG58.png" alt="enter image description here" /></a></p>
  <pre><code>&lt;Grid item xs={12} &gt;
    &lt;Typography noWrap className={classes.accordionCheckMarkFor} &gt;
      Calender
    &lt;/Typography&gt;
    &lt;AccordionActions&gt;
      &lt;Box&gt; 
        &lt;Checkbox /&gt;
        &lt;Checkbox /&gt;
        &lt;Checkbox &gt;
      &lt;/Box&gt;
    &lt;/AccordionActions&gt;
  &lt;/Grid&gt;
  </code></pre>
  <p>I tried certain things</p>
  <pre><code>accordionCheckMarkFor:{
      fontSize:&quot;110%&quot;,
      fontWeight: 500,
      float:'left'
  },
  alignCheckboxes:{
      marginTop:'0px',
      paddingTop:'0px',
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/55rMT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/55rMT.png" alt="enter image description here" /></a></p>
  <p>as well as trying to margintop:auto the container the invites,documents were in <a href="https://i.stack.imgur.com/wCCtr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wCCtr.png" alt="enter image description here" /></a></p>