flexbox div text not align inline with child element

Issue

Consider the following snippet:

div {
  display: flex;
  flex: 0 0 45%;
  max-width: 45%;
}

<div>Lorem ipsum dolor sit amet, <strong>dolor sit</strong>tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.</div>

currently it looks like enter image description here

but I want to align enter image description here

Solution

You can wrapped with an other div.

.wrapper {    
    max-width: 45%;
    display: flex;
    flex: 0 0 45%;
}

<div class="wrapper">
  <div>
    Lorem ipsum dolor sit amet, <strong >dolor sit</strong> tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.
  </div>
</div>

.flex-container {    
    max-width: 45%;    
    flex: 0 0 45%;    
    display: flex;
}
.flex-container div {
  background: gray;
  padding: 10px;
  margin: 10px;
}
.w {    
   color: green;
  position: relative;
}

<div class="flex-container">
  <div>  
      Lorem ipsum dolor sit amet, <strong class="w">dolor sit</strong> tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.  
  </div>

  <div>  
      Lorem ipsum dolor sit amet, <strong class="w">dolor sit</strong> tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.tempor incididunt ut la.  
  </div>
</div>

Answered By - Maik Lowrey