flex layout 2

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills#flex_layout_two

HTML

<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Flexbox: Task 2</title>


    <style>
        body {
            background-color: #fff;
            color: #333;
            font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
            padding: 1em;
            margin: 0;
        }

        ul {
          max-width: 700px;
          list-style:none;
          padding: 0;
          margin: 0;
        }

        li {
          background-color: #4D7298;
          border: 2px solid #77A6B6;
          border-radius: .5em;
          color: #fff;
          padding: .5em;
        }
    </style>



</head>

<body>

  <ul>
    <li>I am small</li>
    <li>I have more content than the very small item.</li>
    <li>I have lots of content. So much content that I don't know where it is all going to go. I'm glad that CSS is pretty good at dealing with situations where we end up with more words than expected!</li>
  </ul>

</body>

</html>

CSS

ul {
  display: flex;
}

li {
  flex: 1;
}

li:first-of-type { /*making the 1st item twice the size of the other items*/
  flex: 2;
}