Fix CSS padding increase size of element

 Fix CSS padding increase size of element - I am trying to give my div and textarea some padding. When I do this, it increases the size of the element, instead of shrinking the content area inside of it. Is there any way to achieve what I am trying to do?

box-sizing:border-box

 * {box-sizing: border-box;}

contoh:

<div class="wrapper">

  <div class="left">

    <span>Hellow</span>

  </div>

  <div class="right">

    <img src="https://source.unsplash.com/random">

  </div>

</div> 

* {

  padding: 0;

  margin: 0;

}

.wrapper {

 width: 100%;

  display: flex;

  height: 400px;

}

.left {

  display: inline-block;

  width: 400px;

  height: 100%;

  background: silver;

  box-sizing:border-box;

   padding: 20px;

  background: blue;

  

  span {

    color: white;

    height: 100%;

  }

}

.right {

  display: inline-block;

  width: calc(100% - 400px);

  background: red;

  height: 100%;

  

  img {

    width: 100%;

    height: 100%;

    object-fit: cover;

  }

  

  

}