title: I want to add a card and image adjacent to each other in column format
body: <p>I want to add one card and an image,in two adjacent columns.But when I am trying to do it is coming in row manner,but what I want is that left side should be filled with card and right side with the image.</p>
  
  <p>The <code>div='column1'</code> contains the div in which image is present.The image must be on the right hand side and must be adjacent to card</p>
  
  <p>The <code>div='column2'</code> contains the card div and  should be placed on the left on hand side.</p>
  
  <p>My two div tags are appearing stacked whereas I want them to be appear adjacent to each other such as in columns. </p>
  
  <p>Also does is there a difference between <code>span</code> and <code>div</code> tag, cause as far as I have used them they all feel the same to me.</p>
  
  <p>Can anyone guide me in this context, also i am very bad with these columns and rows and grids stuff with css , any link that might help?</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>.column {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 10px;
    height: 500px;
    width: 400px;
    /* Should be removed. Only for demonstration */
  }
  
  .column {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 10px;
    height: 500px;
    width: 900px;
    /* Should be removed. Only for demonstration */
  }
  
  * {
    margin: 0px;
    padding: 0px;
  }
  
  body {
    font-family: Arial;
  }
  
  .card_agi_container {
    border-radius: 10px;
    background-color: #732a12;
    width: 250px;
    height: auto;
    margin: 10%;
    padding: 10px;
  }
  
  .background {
    text-align: center;
    background: linear-gradient(to left, #120a07, #851804);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
  }
  
  .content {
    background: linear-gradient(to left, #120a07, #851804);
    padding: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  
  .image {
    height: 150px;
    width: 250px;
    border-radius: 5px;
  }
  
  .hero-name {
    text-align: center;
    font-size: 19px;
    font-weight: lighter;
    padding: 10px;
  }
  
  .hero-type {
    background-color: black;
    padding: 7px;
    color: whitesmoke;
    border-radius: 5px;
    width: 100px;
    display: block;
    text-align: center;
    position: relative;
    top: -70px;
  }
  
  .dota2-hero-profile {
    text-align: center;
    font-size: 14px;
    padding: 20px;
  }
  
  .hero-stats&gt;p {
    letter-spacing: 1px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="top-part"&gt;
    &lt;div class="row" text-align: center;&gt;
  
      &lt;!-- The div for the card --&gt;
      &lt;div class="column2"&gt;
  
        &lt;div class="card_agi_container"&gt;
          &lt;div class="background"&gt;
            &lt;img src="C:\Users\Hp\Desktop\New folder\img.jpg" class="image" alt="Nevermore"&gt;
          &lt;/div&gt;
  
          &lt;div class="content"&gt;
            &lt;h1 class="hero-name"&gt;Shadow Fiend&lt;/h1&gt;
            &lt;span class="hero-type"&gt;Agility&lt;/span&gt;
            &lt;div class="hero-stats"&gt;
              &lt;p&gt;Win Rate : 50%&lt;/p&gt;
              &lt;p&gt;Pick Rate :50%&lt;/p&gt;
              &lt;p&gt;Ban Rate : 50%&lt;/p&gt;
              &lt;p color="green"&gt;Percentage Change :2.3%&lt;/p&gt;
            &lt;/div&gt;
            &lt;h1 class="dota2-hero-profile"&gt;Detail View&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- The div for the image --&gt;
      &lt;div class="column1"&gt;
        &lt;div class="profile-image"&gt;
          &lt;img src="E:\FAST\Hit\E-sports-Lab\img\hero-profile\sf.png"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>