Как разместить кнопку внутри li?

Как я могу разместить эту кнопку в левом нижнем углу «ли»? Кнопка теперь находится в левом центре при определении bottom: 0; и left: 3%;.

Код, который добавляет li на html-страницу:

const setupPosts = (data) => {
            let html = '';
            data.forEach(doc => {
                const post = doc.data();
                const picURL = post.picURL;
                var path = doc.ref.path;
                let li = `<li class = "post">
                    <div class = "content">${post.content}</div>
                    <button class = "comment" onclick = "comment('${path}')">Comment</button>
                    <button class = "like" onclick = "like('${path}')">Like</button>`;
                
                li += (post.picURL ? `<img class = "img" src = "${post.picURL}" onclick = "openImage('${picURL}')">` : ``);
                li += `</li><br></br>`;
                html += li
            })
            
            posts.innerHTML = html;
        }

CSS:

.comment {
    background-color: #006FC4;
    border: 1px solid #00508D;
    font-size: 15px;
    color: #FFFFFF;
    padding: 5px;
    border-radius: 7px;
    height: 30px;
    position: relative;
    margin: auto;
    bottom: 0;
    left: 3%;
}

.like {
    background-color: #006FC4;
    border: 1px solid #00508D;
    font-size: 15px;
    color: #FFFFFF;
    padding: 5px;
    border-radius: 7px;
    height: 30px;
    position: relative;
    right: 0;
    bottom: 0;
}