JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <title>タスク管理</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="vue-drop-drag.js"></script>
    <script>

    </script>
</head>
<body>

<div id="task-manager" class="container-fluid">
    <div class="row content">
        <div class="col-sm-3 sidenav" @dragover.prevent @drop="drop(1)" @dragover.prevent @dragover="dragover()">
            <h4>考えてるタスク</h4>
            <button v-on:click="addNewTask" type="button" class="btn btn-info">Add</button>
            <div v-for="taskItem in taskList" v-if="taskItem.type == 1" draggable="true"
                 @dragover.prevent @dragstart="dragstart(taskItem)"
                 @dragover.prevent @dragend="dragend(taskItem)"
                 class="row task-view">
                    <textarea class="form-control" rows="3" v-model="taskItem.content" v-on:change="storage">
                    </textarea>
            </div>
        </div>
        <div class="col-sm-3 " @dragover.prevent @drop="drop(2)" @dragover.prevent @dragover="dragover()">
            <h4>やっているタスク</h4>
            <div v-for="taskItem in taskList" v-if="taskItem.type == 2" draggable="true"
                 @dragover.prevent @dragstart="dragstart(taskItem)"
                 @dragover.prevent @dragend="dragend(taskItem)"
                 class="row task-view darkorchid">
                    <textarea class="form-control" rows="3" v-model="taskItem.content" v-on:change="storage">
                    </textarea>
            </div>
        </div>
        <div class="col-sm-3 sidenav"...

CSS

.col-sm-3 {
            height: -webkit-fill-available;
            overflow: scroll;
        }

        /* Set gray background color and 100% height */
        .sidenav {
            background-color: #f1f1f1;
        }

        .deleted-box {
            position: fixed;
            bottom: 20px;
            left: 50%;
            margin-left:-58px;
        }

        /* On small screens, set height to 'auto' for sidenav and grid */
        @media screen and (max-width: 767px) {
            .sidenav {
                height: auto;
                padding: 15px;
            }

            .row.content {
                height: auto;
            }
        }

        .task-view {
            border-style: solid;
            margin: 1px;
        }

        .task-view textarea {
            font-weight: bold;
            resize: vertical;
        }

        .task-view.darkorchid {
            border-color: darkorchid;
        }

        .task-view.darkorchid textarea {
            color: darkorchid;
        }

        .task-view.green {
            border-color: green;
        }

        .task-view.green textarea {
            color: green;
        }

        .task-view.red {
            border-color: red;
        }

        .task-view.red textarea {
            color: red;
        }

JavaScript

$(function () {
    var TaskItem = function () {
        var self = this;
        self.content = "";
        self.type = 1;
    };
    var taskList = JSON.parse(localStorage.getItem("thuong_task_list"));
    if (taskList == null) {
        taskList = [];
    }

    // Create a root instance
    new Vue({
        el: '#task-manager',
        data: {
            taskList: taskList,
            draggingTaskItem: null,
        },
        methods: {
            storage: function () {
                localStorage.setItem("thuong_task_list", JSON.stringify(this.taskList));
            },
            addNewTask: function (event) {
                this.taskList.unshift(new TaskItem());
                this.storage();
            },
            //Drag Drop
            dragover: function (ev) {
                console.log('dragover');
            },
            drop: function (taskGroupType, ev) {
                console.log('drop');
                console.log('Task Item: ' + this.draggingTaskItem.content);
                this.draggingTaskItem.type = taskGroupType;
                this.storage();
            },
            dragstart: function (/** TaskItem **/ taskItem, ev) {
                console.log('dragstart');
                this.draggingTaskItem = taskItem;
            },
            dragend: function (/** TaskItem **/ taskItem, ev) {
                console.log('dragend');
                this.draggingTaskItem = null;
            }
        }
    });
});