Pricing component with toggle solution

Community feedback

• 

  Chris Psilocybin•1,185

  @xphstos

  Posted about 3 years ago

  Hey there! Good job on this one! Regarding your question about the dollar sign.

  If you have two inline elements with different font-size you can have them aligned (vertically) if both of them have the same line-height and adjust the vertical-align property of the shorter one. That's actually the "hard" or the "old" way if you prefer.. For example, we have this piece of html:

  <p>
    <span class="sign">$</span>
    <span class="value">199.99</span>
  </p>
  

  We could have them aligned with this:

  span {
    line-height: 3rem;
  }
  
  span.sign {
    vertical-align: top;
  }
  
  span.value {
    font-size: 2rem;
  }
  

  Nowadays we have flexboxes to do that work for us. Again, for the same piece of code we could have the following css.

  p {
    display: flex;
    align-items: center;
  }
  
  span.value {
    font-size: 2rem;
  }
  

  This time we set the parent as a flex container and we align vertically all the children. We could also have this by setting the parent element with a position: relative and then set position: absolute at the sign element. Now "just" need to vertically align it by giving it top: 50% and transform: translateY(-50%). The issue now is that the sign falls over the our value. We need to "know" the signs width and apply it as padding in parent element or as margin in our inner element that's right after our sign element. As you can guess it's not the optimal way but an option nonetheless.

  To be honest your solution is a very creative and modern approach! The only drawback it works only for one character, other than that I love it!!!

  As for me, I choose the "old" way just because.. no particular reason. You can see my solution here.

  12

  Marked as helpful