JSFiddle - React, Tailwind, and code Playground

HTML

<div class="holder">
    <span class="black"></span>
    <span class="red"></span>
</div>

CSS

.holder { position:absolute; width:100%; height:100%; background-color:#fff; }
.holder span {
    float: left; position:relative; width: 10px; height: 200px;
}
.black { background-color: #000; left:50%; margin-left:-5px; top:10px; }
.red { background-color: #f00; left:30%; top:100px; }

.rotate {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transition: 1s;
  -moz-transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
}

JavaScript

var rotateVal = 90;
 $('.red').animate({
  'transform':'rotate('+rotateVal+'deg)',
  '-ms-transform':'rotate('+rotateVal+'deg)',
  '-webkit-transform':'rotate('+rotateVal+'deg)',
  '-o-transform':'rotate('+rotateVal+'deg)',
  '-moz-transform':'rotate('+rotateVal+'deg)'
 },500);

//this ways works but i don't want to this with transitions
$('.black').addClass('rotate');
/*
$('.black').css({
    'transform':'rotate('+rotateVal+'deg)',
    '-ms-transform':'rotate('+rotateVal+'deg)',
    '-webkit-transform':'rotate('+rotateVal+'deg)',
    '-o-transform':'rotate('+rotateVal+'deg)',
    '-moz-transform':'rotate('+rotateVal+'deg)',
    'transition':'1s',
    '-moz-transition':'1s',
    '-webkit-transition':'1s',
    '-o-transition':'1s'
});
*/