Home>

I'm trying to make two half-wrappers line up.
The wrapper uses half of the space, but leaves unused space on the right
I don't know why the second wrapper goes into the first wrapper

I'm trying a lot, but I don't know so please lend me wisdom

Error message
.Wrapper {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  width: 50%;
  border: 1px solid black;
  background-color: purple;
}
<section>
   Test Title 
  
   Sample text
  

<section>
   Test Title 
  
  Sample text
  
</section>
  • Answer # 1

    Use

    inline-flex(operation check link) or apply flexbox to the flex container's parent element (operation check link).

    Test Title Sample text
    Test Title Sample text
    . Wrapper {
      display: inline-flex;
      box-sizing: border-box;
      flex-direction: column;
      width: 50%;
      border: 1px solid black;
      background-color: purple;
    }
    
      
         Test Title      Sample text   
      
         Test Title      Sample text   
    . container {
      display: flex;
    }
    .Wrapper {
      display: inline-flex;
      box-sizing: border-box;
      flex-direction: column;
      width: 50%;
      border: 1px solid black;
      background-color: purple;
    }