add this to your styles

  transform: rotate(90deg);
  transform-origin: center;

I have an Input type=number in React, styled with styled-components. I need some of the inputs display it’s value vertically

export const UnitValue = styled.input`
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
  }
  font-weight: bold;
  text-align: center;
  margin-right: ${props => {props.marginRight};
  margin-top: ${props => props.marginTop};
  margin-left: ${props => {props.marginLeft};
  width: ${props => {props.width};
  height: ${props => {props.height}
  border: ${props => {props.border};
  background-color: ${props => props.color};
`;

Some inputs displays vertically but it’s value is horizontal. I need that value to be displayed vertically, is there a way to do that? Here’s the input:

I need that the input value displays in the same direction of the text that is near to it without using transform css attribute. Is there a way?