<div class='todo_list'>
        <div class='add_list'>&#43; List</div><br>
        <h3 contenteditable='true'>New List<span class='remove_list' contenteditable='false'></span></h3>
        <ul>
            <li>
                <input type='checkbox' class='task_status'>
                <p class='task' contenteditable='true'></p>
                <span class='drag'></span>
            </li>
        </ul>
        <div class='add_task'>&#43;</div><br>
    </div>

*{
    margin: 0;
    padding: 0;
}

body{
    font-family: Tahoma, sans-serif;
}

div.todo_list{
    max-width: 700px;
    margin: 0 auto;
}

ul li{
    overflow: hidden;
    border: 1px;
    border-style: solid;
    border-color: #ccc;
    border-top: none;
    position: relative;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    transition: opacity .3s;
}


p,
input[type=checkbox]{
    position: absolute;
    height: auto;
}


p{
    top: 0;
    right: 40px;
    left: 38px;
    padding: 12px;
    border-left: 1px solid #ccc;
}

p,
input[type=checkbox]{
    position: relative;
    height: auto;
}

ul li{
    overflow: hidden; // <-- this is the problem I guess
    ...
}

p, input[type=checkbox] {
    position: absolute; // <-- this is a problem
    height: auto;
}