How to maintain the integrity of adjacent spans in dir=rtl ?

[John Fairfield]

The following example has four elements in two spans:

label1:(input1) label2:(input2)

When you hit the button to switch the document.dir to 'rtl', it comes out
............... (input1):label2 :(input2) label1

Whereas what I expected and need is
............... (input2):label2 (input1):label1

Please help. I could live without the colons, but not with the broken span cum misleading labels.

<html>
<head><title>test page</title>
<script type="text/javascript">
function toggleDir()
 {  if (document.dir == "ltr") document.dir = "rtl"; else document.dir = "ltr";    }
</script>
</head>
<body>

<div id = "chatControls" style="position: relative; border: 1px solid #a0a0bf; width : 470px;">

   <span style='white-space: nowrap;'>
   <label for='x'>Label1:</label>
   <input type="text" id="x" value="11111" />
   </span>
   
   <span style='white-space: nowrap;'>
   <label for='y' >Label2:</label>
   <input type="text" id='y' value="22222"/>
   </span>

<input style="width: 24px; font-size: 60%" onclick="return toggleDir();" type="button" value="<>" />   

</div>
</body>
</html>

Behavior the same in FF3.6 and IE7. And the first thing I tried was the simple way, without the label tag, as in

<span style='white-space: nowrap;'>
   Label1:<input type="text" id="x" value="11111" />
</span>

same prob.

[Sudaraka]

Try floating the lables and inputs to left

<style>
#chatControls label,
#chatControls input{float:left;}
</style>