Vue.Draggable div items display left and right

I am new to Vue.js and for this project, I am using Vuedraggable to drag items. Currently, the items inside the draggabble div are displayed as

Text 1
Text 2
Text 3
Text 4

Is there a way we can change that and display as

Text 1   Text 2
Text 3   Text 4 

JsFiddle Link = https://jsfiddle.net/ujjumaki/y1xw95rc/41/

View

<div id="app">
  <div>
    <draggable id="first" data-source="juju" :list="todos" class="list-group" draggable=".item">
     <div class="list-group-item item" v-for="(element, index) in todos" :key="index" style="border-style: outset; 
margin-top:0.5%; width: 10%; border-color:#17a2b8; border-width:thin;">
     <p>
     {{element.text}} id {{element.id}}
     </p>
      </div>
   </draggable>
  </div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

Method

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Text 1", id: "1" },
      { text: "Text 2", id: "2" },
      { text: "Text 3", id: "3"},
      { text: "Text 4", id: "4" }
    ]
  },
  methods: {
    toggle: function(todo){
        todo.done = !todo.done
    }
  }
})

Try to add following css:

#first {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  text-align: center;
}
.list-group-item {
  width: 100% !important;
}