title: Input aligned left, in center of div
body: <p>I'm trying to align my input sections in the center of the div, with the labels left aligned on the left of the input. I can't seem to get the input sections to align to the left of each other, in the center of the div. Bear with me, I'm incredibly new to coding of any sort so my code might not be the best. 
  Here is my html and css thus far:
  This is what I would like it to look like. Label on the left, input field in the center. <a href="https://i.stack.imgur.com/XQBIG.png" rel="nofollow noreferrer">IMG</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.othercomponent {
     background-color: white;
     height: 30px;
     border-radius: 10px;
     width: 95%;
     margin: 0 auto;
     margin-top: 10px;
     text-indent: 10px;
     font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: medium;
     font-weight: bold;
     display: block;
  }
  
  .lpks-input {
     width: 35%;
     display: inline-block;
     padding-right: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body class="body"&gt;
     &lt;div class="othercomponent"&gt;Plot Name &lt;input class="lpks-input"&gt;&lt;/div&gt;
     &lt;div class="othercomponent"&gt;Other Name &lt;input class="lpks-input"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
   </code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is a JSFiddle to show what I have now:
  <a href="https://jsfiddle.net/h8vo2opv/" rel="nofollow noreferrer">https://jsfiddle.net/h8vo2opv/</a></p>