An image & text inline within a list

Question

I'm looking to keep an image and text inline (next to each other) and BOTH hyperlinked within a href, but each hyperlinked item is within a 2 column list, like below:

.links {
        display: block;
        margin: 0 -1em;
        overflow: hidden; 
        padding: 1em 0;

            li {
                box-sizing: border-box;
                float: left;
                padding: 1em;
                list-style: none;
                width: 50%;
                    &:nth-of-type(2n+1) {
                        clear: left;
                    }

                .grid-pic{
                    height:200px;
                    background-image: url(../images/site/thumbs/boss-holder.png);
                    background-size:contain;
                    background-position: center center;
                    background-repeat:no-repeat;
                    }   

                a {
                    color: $color-secondary;
                    border:3px solid $color-secondary;
                    display: block;
                    font-size: 2em;
                    @extend %font-semibold;
                    line-height: 1;
                    padding: 25% 1em;
                    position: relative;
                    text-align: left;
                    text-decoration: none;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    } }}

<ul class="links">
<li><a href="#section1"><div class="grid-pic"></div>Text</a></li>
<li><a href="#section2"><div class="grid-pic"></div>Text</a></li>
<li><a href="#section3"><div class="grid-pic"></div>Text</a></li>
<li><a href="#section4"><div class="grid-pic"></div>Text</a></li>
</ul>

It currently looks like this
I'd like it to look like this

I'm using this expanding grid pen as a framework, if that helps. I think it's the list that's throwing me from working it out.

Answer 1

I added display:inline-block; and vertical-align:middle; to your .grid-pic class to put the images next to the text.

.links {
  display: block;
  margin: 0 -1em;
  overflow: hidden;
  padding: 1em 0;
}

.links li {
  box-sizing: border-box;
  float: left;
  padding: 1em;
  list-style: none;
  width: 50%;
  &:nth-of-type(2n+1) {
    clear: left;
  }
}

.links li .grid-pic {
  height: 100px;
  width: 100px;
  background-image: url(http://via.placeholder.com/100x100);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}

.links li a {
  color: $color-secondary;
  border: 3px solid $color-secondary;
  display: block;
  font-size: 2em;
  @extend %font-semibold;
  line-height: 1;
  padding: 25% 1em;
  position: relative;
  text-align: left;
  text-decoration: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

<ul class="links">
  <li>
    <a href="#section1">
      <div class="grid-pic"></div>Text</a>
  </li>
  <li>
    <a href="#section2">
      <div class="grid-pic"></div>Text</a>
  </li>
  <li>
    <a href="#section3">
      <div class="grid-pic"></div>Text</a>
  </li>
  <li>
    <a href="#section4">
      <div class="grid-pic"></div>Text</a>
  </li>
</ul>