Comparison Table with Flex?

Is it possible to make a comparison table where all the rows & columns line up with flex?

by BaronGrivet

HTML

<div id="app">
  <h2>Compare Items:</h2>
  <div class="wrapper">
    <div v-for="item in items" class="item">
      <div class="child">
        <h3>{{ item.name }}</h3>
        <p>{{ item.summary }}</p>
      </div>  
      <div v-for="feature in item.features" class="child">
        <h4>Feature {{ feature.ref }}</h4>
        <p>{{ feature.text }}</p>
      </div>
    </div>  
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.wrapper {
  display: flex;
}

.item {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}

.child {
   padding: 10px 0;
}

h2 {
  font-weight: 900;
  font-size: 1.3em;
}

h3 {
  font-weight: 600;
  font-size: 1.2em;
  text-transform: capitalize;
}

h4 {
  font-weight: 600;
}

Vue

new Vue({
  el: "#app",
  data: {
    items: [
    ],
    words: [
    	'all', 'and', 'are', 'better', 'boys', 'brings', 'but', 'can', 'charge', 'crazy', 'damn', 'for', 'go', 'guys', 'have', 'i', 'it', 'its', 'know', 'la', 'lala', 'lalala', 'like', 'lose', 'makes', 'me', 'milk', 'minds', 'my', 'right', 'shake', 'teach', 'than', 'that', 'the', 'their', 'they', 'thing', 'think', 'time', 'to', 'up', 'waiting', 'want', 'warm', 'way', 'what', 'wind', 'yard', 'you', 'yours'
    ]
  },
  methods: {
  	generateItems: function () {
    	var numberOfItems = this.getRandomNumber(2,6)
      var i
      for (i = 0; i < numberOfItems; i++) { 
      	itemName = this.getRandomWords(2)
        itemSummary = this.getRandomWords(this.getRandomNumber(10,60))
        features = []
        var f
        for (f = 0; f < 4; f++) {
         features.push({
           'ref': f+1,
           'text': this.getRandomWords(this.getRandomNumber(10,60))
         })
        }

        this.items.push({ 
        'name': itemName,
        'summary': itemSummary,
        'features': features,        
        })
      }
      console.log(this.items)
    },
    getRandomWords: function (numberOfWords) {
    	var returnString =''
      for (i = 0; i < numberOfWords; i++) { 
				returnString = returnString + this.words[Math.floor(Math.random() * this.words.length)] + ' '
      }
      return returnString
    },
    getRandomNumber: function (min, max) {
    	return Math.random() * (max - min) + min
    }
  },
  mounted: function () {
    this.generateItems()
  }
})