Dividere una DIV in 2 colonne

#div1 { 
  width: 400px; 
} 
#span1 { 
  margin: 10px; 
  float: left; 
} 
#span2 { 
  margin: 10px; 
  float: right; 
} 
 
#div2 { 
  width: 400px; 
  display: flex; 
  justify-content: space-between 
} 
#span3 { 
  margin: 10px; 
   
} 
#span4 { 
  margin: 10px; 
   
}

</style>
</head>

<body>

<div id="div1"> 
  <span id="span1"> 
    <b>colonna 1</b><br> 
    Inserisci il to contenuto qui<br> 
    anche su più righe 
   </span> 
  <span  id="span2"> 
    <b>colonna 2</b><br> 
    Inserisci il to contenuto qui<br> 
    anche su più righe 
  </span> 
</div> 
 
ALLINEAMENTO CON SPAN E FLEX 
<div id="div2"> 
  <span id="span3"> 
    <b>colonna 3</b><br> 
    Inserisci il to contenuto qui<br> 
    anche su più righe 
   </span> 
  <span  id="span4"> 
    <b>colonna 4</b><br> 
    Inserisci il to contenuto qui<br> 
    anche su più righe 
  </span> 
</div>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style>

#div1 {
width: 400px;
}
#span1 {
margin: 10px;
float: left;
}
#span2 {
margin: 10px;
float: right;
}

#div2 {
width: 400px;
display: flex;
justify-content: space-between
}
#span3 {
margin: 10px;

}
#span4 {
margin: 10px;

}

</style>
</head>

<body>

<div id="div1">
<span id="span1">
<b>colonna 1</b><br>
Inserisci il to contenuto qui<br>
anche su più righe
</span>
<span id="span2">
<b>colonna 2</b><br>
Inserisci il to contenuto qui<br>
anche su più righe
</span>
</div>

ALLINEAMENTO CON SPAN E FLEX
<div id="div2">
<span id="span3">
<b>colonna 3</b><br>
Inserisci il to contenuto qui<br>
anche su più righe
</span>
<span id="span4">
<b>colonna 4</b><br>
Inserisci il to contenuto qui<br>
anche su più righe
</span>
</div>

</body>
</html>