title: How to change the text position
body: <p>I am new in programing industry especially in css/html stuff.
  Does someone of you know how to change the position of text or how to make another box/table with all that information beside the card with picture of actor?</p>
  
  <p>Do I have to make new div or something?
  Add something to css?</p>
  
  <p><a href="https://i.stack.imgur.com/LXXB7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LXXB7.png" alt="enter image description here"></a></p>
  
  <p>My CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>body {
    background: url('/static/images/backkk.jpg');
  }
  
  .navbar-inverse {
    background-color: #222;
    border-color: #080808;
  }
  
  .card{
    display: inline-table ;
    justify-content: space-evenly;
    grid-template-columns: 300px;
    grid-template-rows: 330px 300px 40px;
    grid-template-areas: "image" "text" "stats";
    border-radius: 7px;
    background: url('/static/images/back.jpg');
    box-shadow: 7px 7px 7px rgba(252, 135, 2, 0.9);
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    border:3px solid rgb(255, 189, 7);
  }
  
  /*height card*/
  .card-text        
  {
    grid-area: text;
    margin: 25px;
  }
  
  /*  pilot*/
  .card-text p {
    color: rgb(16, 207, 144);
    font-family: 'Times New Roman', Times, serif;
    font-size:17px;
    font-weight: 300;
    border:"3px solid #73AD21";
    text-align: center
  }
  
  .card-text h2 {
    margin-top:20px;
    font-size:23px;
  }
  
  /* lenght of card*/
  .card {
    transition: 0.5s ease;
    cursor: pointer;
    margin-top:-200px;
    right: -30%;
    width: 300px;
    height: 35rem;
  }
  </code></pre>
  
  <p>And my HTML:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;body&gt;
      &lt;div class="card" &gt;
          &lt;div class="card-image"&gt;
            &lt;img src="{{ actor.picture }}" alt="No poster in datebase"    width="289" height="345"&gt;
          &lt;/div&gt;
      &lt;div class="card-text"&gt;
        &lt;h2&gt;
          &lt;a href="/actors/actor_detail/{{actor.id }}"&gt;{{ actor.name }}&lt;/a&gt;  
        &lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="card-text"&gt; 
          &lt;p&gt;Age: {{ actor.age}} &lt;/p&gt;
          &lt;p&gt;Net-worth: {{actor.net_worth}}&lt;/p&gt;
          &lt;p&gt;Date-of-birth: {{actor.date_of_birth}}&lt;/p&gt;
          &lt;p&gt;Children: {{actor.children}}&lt;/p&gt;
          &lt;p&gt;Marital-status: {{actor.marital_status}}&lt;/p&gt;  
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>