score:1

Accepted 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>

score:0

so, i have found a better solution. now my button is taking equivalent height to its div at every screen size, and my div height is increasing according to its content. i have updated the .btn class with position property which sync's my button height with that of div.

.btn{
     float: right;
     position:absolute;
     top: 0;
     bottom: 0;
     right: 0;
}

and added a margin for not hiding text beneath the button

.todolist h3{
     transform: skew(-20deg);
     letter-spacing: 2px;
     display: inline-block;
     /* margin is added to shift text onto new line instead of hiding it beneath the edit button */
     margin: 5px 25px;
}

and added a media query

@media only screen and (min-width: 500px) {
     .todolist {
       width: 50%;
     }
}

here's how it looks now enter image description here

score:1

the problem is actually in your css. when the screen becomes smaller no room is left for the todolist and button in skew 20 degrees. if you remove the width: 50%; rule and use text-align: center; you will get a perfect result.

.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;
     margin-left: auto;
     margin-right: auto;
     color: snow;
     transform: skew(20deg);
     height: 3rem;
     text-align: center;
}

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

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

.btn button{
     height: 100%
}
@media only screen and (min-width: 600px) {
  .todolist {
    width: 50%;
  }
}
<div class="todolist">
     <h3 >make coffee</h3>
     <div class="btn">
     <button>edit</button>
     </div>
</div>
<div class="todolist">
     <h3 >make tea</h3>
     <div class="btn">
     <button>edit</button>
     </div>
</div>
<div class="todolist">
     <h3 >make orange juice</h3>
     <div class="btn">
     <button>edit</button>
     </div>
</div>


Related Query

More Query from same tag