Flex Row space between wrapped items

What is the most dynamic way of having any amount of rows with any amount of items with a set margin between all the items? Right now the only thing that works for me is to wrap each item in a wrapper set the flex basis to the wrapper and the margin to the child. The issues with this is I loose the ability to have each row the same height of the tallest content in the row.

Case 1: Only margin bottom https://jsfiddle.net/6oaney4e/6/

This works well because the content keep the height of the tallest item on each row

html

<div class="wrapper">
  <div class="item">
  text
  </div>
  <div class="item">
  text
  <br>
  line2
  </div>
  <div class="item">
  text
  </div>
  <div class="item">
  text
  </div>
</div>

css

.wrapper{
  display: flex;
  flex-flow: row wrap;
  margin: -10px;
  padding: 10px;
  background: green;
}
.item{
  flex: 0 0 50%;
  background: orange;
  margin-bottom: 10px;
}

Case 2: All around margin https://jsfiddle.net/6oaney4e/7/

Here for some reason the rows break I'm guessing that's because the row cant fit the items in with the extra margin on the side.

html same as CASE 1

css

.wrapper{
  display: flex;
  flex-flow: row wrap;
  margin: -10px;
  padding: 10px;
  background: green;
}
.item{
  flex: 0 0 50%;
  background: orange;
  margin: 10px;
}

Case 3: Wrapping items and adding margin to the inner item https://jsfiddle.net/6oaney4e/8/

That worked but now the items on each row arent really aware of each other and cant have the same height.

html

<div class="wrapper">
  <div class="item-wrap">
  <div class="item">
  text
  </div>
  </div>
  <div class="item-wrap">
  <div class="item">
  text
  <br>
  line2
  </div>
  </div>
  <div class="item-wrap">
  <div class="item">
  text
  </div>
  </div>
  <div class="item-wrap">
  <div class="item">
  text
  </div>
  </div>
</div>

css

.wrapper{
  display: flex;
  flex-flow: row wrap;
  margin: -10px;
  padding: 10px;
  background: green;
}
.item-wrap{
  flex: 0 0 50%;
}
.item{
  background: orange;
  margin: 10px;
}

Is there a way to keep the HTML as in CASE 1 (without the div.item-wrap), have the items on each row the same height as in CASE 1 and have the spacing work like in CASE 3?