how can we append multiple 'div' elements to the existing 'div' element in javascript DOM?

I am trying to append two child 'div' elements with different classes to one parent 'div' element.Here is my code

//javascript
document.getElementById('add').addEventListener('click',function(){
var task = document.getElementById('task').value;
if(task) addTodoTask(task);
});

function addTodoTask(text){
var list = document.getElementById('todo');

var item = document.createElement('li');

var row = document.createElement('div'); //parent inthis case
row.classList.add('row');

var task = document.createElement('div'); //child 1
task.classList.add('col-md-8');
task.classList.add('col-sm-8');
task.classList.add('col-xs-8');
task.classList.add('task');
task.innerText = text;

var buttons = document.createElement('div'); //child2
task.classList.add('col-md-4');
task.classList.add('col-sm-4');
task.classList.add('col-xs-4');

row.appendChild(task);
row.appendChild(buttons);
item.appendChild(row);
list.appendChild(item);

console.log(list);
}

I want to append task(div),buttons(div) to row(also div), that is child1, child2 should be appended to the parent,all of three are 'div's.

When I do this, It is giving

<div class="row">
   <div class="col-md-8 col-sm-8 col-xs-8 task col-md-4 col-sm-4 col-xs-
      4">hi there
</div><div></div></div>

But I want

<div class="row ">
            <div class="col-md-8 col-sm-8 col-xs-8 task">
                            hi there
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4">
                    some other elements 
            </div>
</div>

How can I fix it? Can anyone help me...