Ustawianie divów dodawanych dynamicznie w 2 kolumnach

0

Cześć,
dodaje za pomocą javascript diva do innego. Chciałbym żeby te dodawane dynamicznie były ustawiane w 2 kolumnach. Czy podpowiecie mi jak to zrobić?

Wygląda to tak:

<div id="rodzic">
  <div id="dodanyDynamicznie1"></div>
  <div id="dodanyDynamicznie2"></div>
  <div id="dodanyDynamicznie3"></div>
  <div id="dodanyDynamicznie4"></div>
  <div id="dodanyDynamicznie5"></div>
  <div id="dodanyDynamicznie6"></div>
  <div id="dodanyDynamicznie7"></div>
</div>

Chciałbym żeby były ustawione tak:

dodanyDynamicznie1 dodanyDynamicznie2
dodanyDynamicznie3 dodanyDynamicznie4
dodanyDynamicznie5 dodanyDynamicznie6
dodanyDynamicznie7
0

width: 50% i float: left dla dodawanych elementów?
https://jsfiddle.net/6ax2wojg/1/

0 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
#rodzic {
  display:-ms-flex;
  display:-webkit-box-flex;
  display:-webkit-flex;
  display:flex;
  flex-wrap: wrap;  
  background-color:#eeeeee;
}

#rodzic > DIV {
  -ms-flex:0 0 50%;
  -webkit-box-flex:0 0 50%;
  -webkit-flex:0 0 50%;
  flex:0 0 50%;
  background-color:#cccccc;
}
</style>
</head>
<body>

<div id="rodzic">
  <div id="dodanyDynamicznie1">1</div>
  <div id="dodanyDynamicznie2">2</div>
  <div id="dodanyDynamicznie3">3</div>
  <div id="dodanyDynamicznie4">4</div>
  <div id="dodanyDynamicznie5">5</div>
  <div id="dodanyDynamicznie6">6</div>
  <div id="dodanyDynamicznie7">7</div>
</div>

</body>
</html>

1 użytkowników online, w tym zalogowanych: 0, gości: 1