Q:

CSS Proper alignment next to image in a row

I'm trying to align text to the right of an image but I can't seem to get it working, I've tried different methods of css but can't get it too work.
Edit: Also, How would I adjust this if i were to put it at the top? If I mvoe it manually then the bottom row will mess up too.
What it looks like (Default)
What I want it too look like (Only the first one, the others mess up)
Here is the css:
.slider__contents {
  height: 100%;
  padding: 2rem;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.slider__image {
  font-size: 2.7rem;
      color: #2196F3;
}
.slider__caption {
    font-weight: 300;
    top: 95px;
    margin-left: 80px !important;
    position: absolute;
    margin: 2rem 0 1rem;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    vertical-align: text-bottom;
}
.slider__txt {
    color: #f00;
    margin-bottom: 3rem;
    max-width: 300px;
    position: absolute;
    top: 95px;
    margin-left: 10px;
    font-size: 17px;
    text-align: left;
}

Here is the html:
<div class="row">
    <div class="col-md-4">
        <div class="slider__contents">
              <img class="img-avatar1" src="/images/team/1.jpg"/>
              <h2 class="slider__caption">Matt Sowards</h2>
              <p class="slider__txt">Founder</p>
              <!-- <a href="#" target="_blank"><p class="slider__steam">Steam Profile</p></a> -->
        </div>
    </div>
</div>

A:

Wrapping your text tags into extra markup and switching to proper flex usage will net you the result you're after. Using absolute positioning is not the way to go here. See the snippet below (I have removed some code, my additions are followed by a comment):

.slider__contents {
  height: 100%;
  padding: 2rem;
  text-align: center;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  background: gray;
}
.slider__image {
  font-size: 2.7rem;
  color: #2196F3;
  display: block;
  width: 4rem; /* Supposed to be the default size of the avatar */
  height: 4rem; /* Supposed to be the default size of the avatar */
  padding: 4px; /* Just to replicate your styles */
  border: 2px solid red; /* Just to replicate your styles */
  border-radius: 50%; /* Just to replicate your styles */
  background-color: white; /* Just to replicate your styles */
  overflow: hidden; /* Just to replicate your styles */
}
.slider__image img {
  width: 100%; /* Fit to container */
  border-radius: 50%; /* Round image */
}
.slider__copy { /* Added to wrap the text */
  display: flex;
  flex-direction: column;
  margin-left: 10px; /* Avoids text sticking to the avatar */
}
.slider__caption {
  font-weight: 300;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
  vertical-align: text-bottom;
  margin: 0; /* Removes default margins, season to taste */
}
.slider__txt {
  color: #f00;
  max-width: 300px;
  font-size: 17px;
  text-align: left;
  margin: 0; /* Removes default margins, season to taste */
  order: -1; /* Places it first in the current flex flow */
}
<div class="row">
    <div class="col-md-4">
        <div class="slider__contents">
              <div class="slider__image"><!-- Added this wrapper around your image, name as you wish -->
                <img class="img-avatar1" src="/images/team/1.jpg" alt="Avatar"/>
              </div>
              <div class="slider__copy"><!-- Added this wrapper around your text, name as you wish -->
                <h2 class="slider__caption">Matt Sowards</h2>
                <p class="slider__txt">Founder</p>
                <!-- <a href="#" target="_blank"><p class="slider__steam">Steam Profile</p></a> -->
              </div>
        </div>
    </div>
</div>

