html - 我该怎么做才能在 HTML/CSS 的侧边栏旁边有一个侧边栏和文本

Question

所以我有一个用 table 做的侧边栏(有人告诉我这样做)

但我的问题是:http://img.prntscr.com/img?url=http://i.imgur.com/pXWxFx9.png

如您所见，红色圆圈是我的侧边栏，但是当我将其他文本(蓝色圆圈中的文本)放入侧边栏的表格/div 下方时。

我怎样才能使蓝色圆圈中的文本移动到您在图像中看到的蓝色方 block 。

这是我的侧边栏代码。

    <div class="border1">
    <div style= "color:yellow; font-size: 20px;">Why choose us?</div>
    <br>
<table>
  <tbody>
    <tr style="font-size:15px;">
      <td style="width: 20%;color:white;">we are a 100% free service,
      <br> we will never ask for a credit card. 
      <br> we will live chat with you if you want, 
      <br> and we update you frequently!
      <br>
      <br>
      we will never force the person to say things to make it look like they are willing to cheat, we will simply talk and get to know them and bring things up and see how it goes, and it will all be reported back to you!
      <br>
      <br>
      <br>
            <p style="color:yellow; font-size:20px"> Live Chat! </p>
            we also have a live chat client built in the website so you can talk live with a staff member about any questions or concerns you have prior to making a request,
            <br>
                even if it says live chat is offline it will send us a notification and we will see it, so don't hesitate to use the chat.</td>

    </tr>
  </tbody>
</table>
</div>

这是我的侧边栏的CSS类代码

.border1 {

    width: 170px;
    padding: 20px;
    border: 15px green;
    margin: 20px;

我想要的代码在侧边栏旁边

<div class=border2>
    <p style="color:white;"> fgynjtufjkftguykhfk.</p>
    <br>
    <br>
            <h1 style="color:yellow;"> How to make a request </h1>
            <p style="color:white;"> fycjfyxcjxcgjnyf</p>
            <p style="color:white;"> 
                Yhbdxtht (first):
                <br>
                pthdxhe (first and last):
                <br>
                partaccounts (fill outdchx below)
                <br>
                <br>
                Factk:hxd
                <br>
                Twrxhr:
                <br>
                ktdshk:
                <br>
                wtdhdt:
                <br>
                stdshat:
                <br>
                anydthhtthey use:
                <br>
                xthrfhdxzhxchtample: facebook, kik, ect..):
                <br>
                <br>
                any questions for us?:
                <br>
                <br>
                </p>
</div>

Answer 1

我就是这样解决的

    div1 {
    float:left;
    width:30%;
}

.div2 {
    float:left;
    width:70%;