How to I create 50/50 horizontal DIV areas?-CodePudding

I've been able to create 2 DIV areas, but they only stack, I would like to make them 50/50?

Thanks for any help.

<body>
  <div id="left">
  <p>TEST</p>
  <p>TEST</p>
  <p>TEST</p>
  </div>
  <div id="right">
  <p>TEST</p>
  <p>TEST</p>
  <p>TEST</p>
  </div>
</body>
</html>

CodePudding user response：

maybe this can help. sorry if i false

.wrapper{
display:flex;
flex-direction:row;
}
#left{
background-color:#32a852;
text-align:center;
width:50%;
}
#right{
background-color:#5b1982;
width:50%;
}

<div >
  <div id="left">
  <p>TEST</p>
  <p>TEST</p>
  <p>TEST</p>
  </div>
  <div id="right">
  <p>TEST</p>
  <p>TEST</p>
  <p>TEST</p>
  </div>
</div>

CodePudding user response：

div{
   display:inline-block;
   width:calc(50% - 2px);
   border:solid 1px green;
   height:100px;  
   margin:0;
   padding:0;
}
   
   
body{
margin:0;
}

<div></div><!--
--><div></div>