Consider the following:
<p>
<b>
<div style="color:rgb(81,33,244)">Player1</div>
</b>
to overtake
<b>
<div style="color:rgb(187,4,0)">Player2</div>
</b>
in 1 hour 20 minutes
</p>
In this Player 1 and Player 2 are shown in different colors, however the 'div' breaks the line and it looks something like:
Player1
to overtake
Player2
in 1 hour 20 minutes
How can I color the players and yet keep them on the same line?
Change your div to span
Also, consider adding class attributes and putting your style information in an external CSS file.
Use an inline element such as span rather than a block element such as div. In fact, given that the purpose of the styling seems to be to emphasize player names, I would say em is the most appropriate tag to use:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.status em { font-weight:bold; font-style:normal }
.player1 { color:rgb(81,33,244) }
.player2 { color:rgb(187,4,0) }
</style>
</head>
<body>
<p class="status"><em class="player1">Player1</em> to overtake <em
class="player2">Player2</em> in 1 hour 20 minutes</p>
</body>
</html>