How to 'disconnect' an element from grid?

Question

I have a website with some code-modules like the following. You can change the size over the grid-system from bootstrap. So thats why my grid is i the first line. With my current code it looks like this:

.label{
   background-color: #F0A;
   padding: 10px;
  }
 
 .image{
  background-color: #000;
  color: #FFF;
  padding: 40px;
 }

<div class="col-xs-12 col-sm-6 col-md-4">
  <div class="content">
        <p class="label">Label</p>
        <div class="image">
           <p>Image</p>
        </div>
  </div>
</div>

But I want it to look something like that:

I don't want to use grid inside of my module because it has to work in other sizes too. If that make sense. How can I kinda 'disconnect' my label from grid?

Answer 1

You can reset display so it behaves as an inline boxe.

options of display can be : inline, inline-block, inline-table, inline-flex, inline-grid and even display:table to keep block behavior but shrinking on content.

inline-block seems to be the most commun option used and compatible since ever.

.label{
   background-color: #F0A;
   padding: 10px;
   display:inline-block;
  }
 
 .image{
  background-color: #000;
  color: #FFF;
  padding: 40px;
 }

<div class="col-xs-12 col-sm-6 col-md-4">
  <div class="content">
        <p class="label">Label</p>
        <div class="image">
           <p>Image</p>
        </div>
  </div>
</div>

If display is not what you want, then float:left; works too

.label{
   background-color: #F0A;
   padding: 10px;
   float:left;
  }
 
 .image{
 clear:both; /* clear the float */
  background-color: #000;
  color: #FFF;
  padding: 40px;
 }

<div class="col-xs-12 col-sm-6 col-md-4">
  <div class="content">
        <p class="label">Label</p>
        <div class="image">
           <p>Image</p>
        </div>
  </div>
</div>