I'm trying to create a a small box with a gradient background next to my header but it doesn't seem to work

Question

Here's the the html I created the myIcon div so that I can style it into a box but it doesn't seem to appear in the output

h1 {
  font-family: 'sticky notes';
  font-weight: 500;
  height: 50px;
  background-image: linear-gradient(45deg, red, orange, yellow);
  background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin: 0;
  padding: 43px;
  text-align: center;
}

.myIcon {
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, red, orange, yellow);
  margin: 0;
  padding: 0;
  display: inline;
}

<div class="headers">
    <h1><div class="myIcon"></div>STICKY NOTES</h1>
</div>

Answer 1

you can try this:

    .header 
    {
        display: flex;
        align-items: center;
    }

    .box 
    {
        width: 50px;
        height: 50px;
        background: linear-gradient(to bottom, #00bfff, #1e90ff);
        margin-left: 20px;
    }

<div class="header">
    <h1>Your Header</h1>
    <div class="box"></div>
</div>

Answer 2

The problem is your .myIcon div has a display: inline property. If you display an element as inline any height and width properties will have no effect

Try to display as inline-block instead of inline.

h1 {
  font-family: 'sticky notes';
  font-weight: 500;
  height: 50px;
  background-image: linear-gradient(45deg, red, orange, yellow);
  background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin: 0;
  padding: 43px;
  text-align: center;
}

.myIcon {
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, red, orange, yellow);
  margin: 0;
  padding: 0;
  display: inline-block;
}

<div class="headers">
    <h1><div class="myIcon"></div>STICKY NOTES</h1>
</div>