JSFiddle - React, Tailwind, and code Playground

HTML

<div class="todo-item">
        <div class="todo-complete-box"></div>
        <div class="todo-item-title">
        <div class="asdf">adlkajldfj<span>dksaㅓ주마읾ㅇㄹalkfasd</span><span>dksaㅓ주마읾ㅇㄹalkfasd</span><span>dksaㅓ주마읾ㅇㄹalkfasd</span></div>
        <div> alkjdfl;ajf<span>dksaㅓ주마읾ㅇㄹalkfasd</span><span>dksaㅓ주마읾ㅇㄹalkfasdalkfasdalkfasdalkfasd</span></div>
        </div>
    </div>

CSS

div.todo-item{
    width: 100%;
    border: 1px solid black;
    border-radius: 5px;
    padding: 7px;
    height: 45px;
    max-height: 45px;
    white-space: nowrap;
    overflow: hidden;
}
div.todo-complete-box{
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid black;
    border-radius: 2px;
    padding: 0px;
    margin: 0px;
    position: relative;
    top: 5.5px;
    margin-right: 10px;
}
div.todo-item-title{
    display: inline-block;
        max-width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
}
div.todo-item div.asdf{display:content;}