<article class="candle">
  <div class="stick"></div>
  <div class="wick"></div>
  <div class="flame"></div>
</article>

html {
  height: 100%;
}

body {
  align-items: center;
  background-color: black;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  margin: 0;  
}

.candle {
  height: 3in;
  position: relative;
  width: 1in;
}

.flame {
  /* border: 1px solid silver; */
  height: 20%;
  left: 0;
  margin: auto;
  position:absolute;
  top: 10%;
  right: 0;
  width: 40%;
}

.flame:before {
  animation-name: flicker;
  background: OrangeRed;
  box-shadow: 0px 0px 4px 2px OrangeRed;
  border-radius: 50% 50% 50% 0;
  content: "";
  width: 100%;
  height: 65%;
  position: absolute;
  transform: rotate(-45deg)
}

.wick {
  background-color: dimgray;
  height: 10%;
  left: calc(50% - 1px);
  position: absolute;
  margin: auto;
  top: 39%;
  width: 2px;
}

.stick {
  background-color: bisque;
  bottom: 0;
  height: 60%;
  left: 0;
  position: absolute;
  right: 0;
}

.stick:before {
  background-color: burlywood;
  border: 2px outset bisque;
  border-radius: 50%;
  content:"";
  height: 25%;
  left: 0;
  position: absolute;
  right: 0;
  top: -12.25%;
}

.stick:after {
  background-color: bisque;
  border-radius: 50%;
  content:"";
  height: 25%;
  left: 0;
  position: absolute;
  right: 0;
  bottom: -12.25%;
}

@keyframes flicker {
  
}