flex test

by jessekinsman

HTML

<div class="ideas_container">
<div class="number_container">
<h3>
1
</h3>
</div>
<p>
lots of test that I need to have aligned to the number on the left lots of test that I need to have aligned to the number on the left lots of test that I need to have aligned to the number on the leftlots of test that I need to have aligned to the number on the leftlots of test that I need to have aligned to the number on the left
</p>
</div>

SCSS

.ideas_container {
  display: flex;
  align-items: flext-start;
  h3 {
    padding: .4em .7em;
    background: blue;
    border-radius: 50%;
    display: inline-flex;
    font-size: 1em;
    color: #fff;
  }
  p {
    display: inline-flex;
    margin: 0;
  }
  .number_container {
    padding: 10px;
    flex-grow: 0;
    flex-shrink: 1;
  }
}