I have this code that displays text and an arrow icon in a border. How do I keep the text left-aligned and make the arrow right-aligned so that it's at the end, inside of the border?
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
.right {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
p{
border:1px solid #000;
}<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<p>Right arrow: <i class="right"></i></p>
</body>
</html>