Am I using absolute and relative positions correctly?
<p><a href="http://codepen.io/DoucetteDeveloper/pen/yJzEvB" rel="nofollow">http://codepen.io/DoucetteDeveloper/pen/yJzEvB</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.information {
  position: relative;
}
.text {
  position: absolute;
  left: 0;
  padding: 10px 30px 40px 80px;
  width: 50%;
  background-color: lightblue;
}
ul li {
  font-size: 31px;
}
ul {
  list-style: none;
}
.contact_info {
  position: absolute;
  padding: 0 1em;
  font-size: 2em;
  right: 310px;
  background-color: lightpink;
}
h1 {
  font-size: 36px;
  line-height: 145%;
  font-weight: 200;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="information"&gt;
  &lt;div class="text"&gt;
    &lt;h1&gt; Lorem Ipsum adalah text contoh digunakan didalam industri pencetakan dan typesetting. Lorem Ipsum telah menjadi text contoh semenjak tahun ke 1500an, apabila pencetak yang kurang terkenal mengambil sebuah galeri cetak dan merobakanya menjadi satu buku spesimen. Ia telah bertahan bukan hanya selama lima kurun, tetapi telah melonjak ke era &lt;/h1&gt; 
  &lt;/div&gt;
  &lt;div class="contact_info"&gt;
    &lt;ul&gt;
      &lt;li&gt;Zoe D&lt;/li&gt;
      &lt;li&gt;(1)222-222-2222&lt;/li&gt;
      &lt;li&gt;Somethingsomething@gmail.com&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I want the pink box to be positioned right next the blue box.
I've put <code>position: relative;</code> on the container holding both the boxes, and <code>position: absolute;</code> on both the boxes. I've offset the blue box 0 from the left side, and offset the pink box 310 from the right side.</p>

<p>Is there a better way to do this? Should I be floating the boxes inside the container div instead?</p>

<p>Also, if you could answer this, I want the pink box next to the blue box while viewed on large screens, but I want the pink box to fall beneath the blue box when the browser is minimised.</p>

<p>Right now what happens when minimised, the pink box covers the blue box (higher Z index, and because it's absolute)and the blue box becomes smaller than full width(I'd like it to be full size on a small screen.)  If you know any good beginners tutorial on how to make responsive designs please, I've looked up media queries before but I'm still confused by it. </p>