radio button is splitting in two lines when resize the page

Question

I have a radiobuttonlist on my web page. when I resize the page to make it smaller, the radio button comes on the top and the text of the radio button comes right underneath it. Below is screenshot of what I am getting:

When I resize the screen, can I see the radio button and text next to it and the text comes to the second line rather than text and radio button separately?

Below is my code:

<style>

   .radioBL input[type="radio"] {
    margin-right: 10px;
    word-break: break-all;
}
    </style>
  <asp:RadioButtonList  CssClass="radioBL" ID="test" runat="server">
      <asp:ListItem  Text="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available."></asp:ListItem>
      <asp:ListItem Text="
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."></asp:ListItem>

  </asp:RadioButtonList>

any help will be highly appeciated.