Customizing Button Position

[ghost]

Hi, I am trying to modify the position of the button and other placeholders by modifying App.js but I am facing an issue. Please find the small modification I made in code. I am also sharing the screenshot of the desired output. I am highlighting part where the code for the button is.

Here are the Code and Output I am getting

module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return _c('div', [_c('div', {
staticClass: "arrow"
}), _vm._v(" "), _c('ul', {
staticClass: "ChatLog"
}, /li 1 STARTS/
_vm._l((_vm.messages), function(message) {
return _c('li', {
staticClass: "ChatLog__entry",
class: {
'ChatLog__entry_mine': message.isMine
}
}, [_c('img', {
staticClass: "ChatLog__avatar",
attrs: {
"src": "/logo.png"
}
}), _vm._v(" "), _c('p', {
staticClass: "ChatLog__message"
}, [_vm._v("\n " + _vm._s(message.text) + "\n "), (message.attachment.type === 'image') ? _c('img', {
staticClass: "ChatLog__message__image",
attrs: {
"src": message.attachment.url
}
}) : _vm._e(), _vm._v(" "), (message.attachment.type === 'video') ? _c('video', {
staticClass: "ChatLog__message__image",
attrs: {
"controls": "",
"height": "160",
"autoplay": ""
}
}, [_c('source', {
attrs: {
"src": message.attachment.url,
"type": "video/mp4"
}
})]) : _vm._e(), _vm._v(" "), (message.attachment.type === 'audio') ? _c('audio', {
staticClass: "ChatLog__message__image",
attrs: {
"controls": "",
"autoplay": ""
}
}, [_c('source', {
attrs: {
"src": message.attachment.url,
"type": "audio/mp3"
}
**})]) : _vm._e()]),
/BTN starts HERE/
_vm._v(" ") , (message.original.type === 'actions') ? _c('div', _vm._l((message.original.actions), function(action) {
return _c('div', {
staticClass: "btn",
on: {
"click": function($event) {
_vm.performAction(action.value, message.original)
}
}
}, [(action.image_url) ? _c('img', {
staticStyle: {
"max-height": "25px"
},
attrs: {
"src": action.image_url
}
}) : _vm._e(), _vm._v("\n " + _vm._s(action.text) + "\n ")])
})) /BTN ends here/
: _vm._e()])
/LI ends here /
})) /UL ENDS HERE/

, _vm._v(" "), _c('input', {
staticClass: "ChatAttachment",
attrs: {
"type": "file",
"id": "attachment",
"value": "Attachment"
}
}), _vm._v(" "), _c('label', {
attrs: {
"for": "attachment"
}
}, [_c('svg', {
attrs: {
"xmlns": "http://www.w3.org/2000/svg",
"width": "20",
"height": "17",
"viewBox": "0 0 20 17"
}
}, [_c('path', {
attrs: {
"d": "M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"
}
})]), _vm._v(" "), _c('span', [_vm._v("Attachment")])]), _vm._v(" "), _c('input', {
directives: [{
name: "model",
rawName: "v-model",
value: (_vm.newMessage),
expression: "newMessage"
}],
staticClass: "ChatInput",
attrs: {
"type": "text",
"placeholder": "Type Here"
},
domProps: {
"value": (_vm.newMessage)
},
on: {
"keyup": function($event) {
if (!('button' in $event) && _vm._k($event.keyCode, "enter", 13, $event.key)) { return null; }
_vm.sendMessage($event)
},
"input": function($event) {
if ($event.target.composing) { return; }
_vm.newMessage = $event.target.value
}
}
})])
},staticRenderFns: []}

// }),
/ 69 /
//

Desired Output

In the output the button is outside the 'ul' and easy to click. PFA the complete code of the App.JS

app.zip