[SOLVED] How can I wrap element content to the next line, starting from the first of its container using flex or other CSS properties?

How can I wrap element content to the next line, starting from the first of its container using flex or other CSS properties?

i want to wrap the content of an element to the next line and it should start from the first of its container.

i need something like this picture. is it possible to achieve this with flex ?? how about other CSS properties ?

<html>
  <style>
    .container {display: flex}
    .item1 {color: red}
    .item2 {float: left}
  </style>
  <body>
    <div class="container">
      <div class="item1"> hi</div>
      <div class="item2"> hello this is a long line that should beark to the next lineeeee. </div>
    </div>
  </body>
</html>

Solution

Try this:

<html>
  <style>
    .container {width: 20vw;}
    .item1 {color: red; float: left}
  </style>
  <body>
    <div class="container">
      <span class="item1"> hi</span>
      <span class="item2"> hello this is a long line that should beark to the next lineeeee. </span>
    </div>
  </body>
</html>

I added width: 20vw only to the container to show that it works. Without that, the content would not be long enough to break.