Button goes out of its div when screen size becomes smaller

I am trying to build a todo list, there’s an edit button whose size is equal to the div height at normal or larger screens, but when the screen becomes smaller than 500px, button collapses and goes out of the its div, Here how my list looks in medium and larger screens image

but when i resize my window to less than 400 or 500px, it looks like

image2

here’s my react JSX code

export default function TodoList(props) {
     const list = props.todos.map(todo =>
          <div className="TodoList">
               <h3 >{todo.todo}</h3>
               <div className="btn">
               <button>edit</button>
               </div>
               
          </div>
          
     )
     return (
          <div>
               {list}
          </div>
     )
}

and my css looks like

.TodoList{
     background: #283048;  /* fallback for old browsers */
     background: -webkit-linear-gradient(to right, #859398, #283048);  /* Chrome 10-25, Safari 5.1-6 */
     background: linear-gradient(to right, #859398, #283048); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     padding: 2px;
     margin: 10px;     
     display: block;
     width: 50%;
     margin-left: auto;
     margin-right: auto;
     color: snow;
     transform: skew(20deg);
     height: 3rem;
     
}

.TodoList h3{
     transform: skew(-20deg);
     letter-spacing: 2px;
     display: inline-block;
}

.btn{
     float: right;
     height: 100%;
}

.btn button{
     height: 100%
}

Answer

Unfortunatly was on mobile while making comments, so making a snippet would have been awkward.

So here is an example of using FlexBox, if you look it also makes the markup simpler too. It’s this sort of layout that flexbox is very useful for. No need for height 100% etc, or wrapper div’s.

.TodoList{
     background: #283048;  /* fallback for old browsers */
     background: -webkit-linear-gradient(to right, #859398, #283048);  /* Chrome 10-25, Safari 5.1-6 */
     background: linear-gradient(to right, #859398, #283048); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
     padding: 2px;
     margin: 10px;     
     display: flex;
     margin-left: auto;
     margin-right: auto;
     color: snow;
     transform: skew(20deg);
     text-align: center;
}

.TodoList h3{
     flex: 1;
     transform: skew(-20deg);
     letter-spacing: 2px;
     display: inline-block;
}

.TodoList {
     width: 50%;
}
<div class="TodoList">
     <h3 >Make Coffee</h3>
     <button>edit</button>
</div>
<div class="TodoList">
     <h3 >Make Tea</h3>
     <button>edit</button>
</div>
<div class="TodoList">
     <h3 >Make Orange Juice</h3>
     <button>edit</button>
</div>