JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="container">
    You can compose complex media queries using logical operators, including not, and, and only. The and operator is used for combining multiple media features together into a single media query, requiring each   <div class="left">
    <img src="http://the-flow.ru/uploads/images/resize/300x0/adaptiveResize/18/11/33/30/25/9497dcc40cd7.png" alt="">
  </div>chained feature to return true in order for the query to be true. The not operator is used to negate an entire media query. The only operator is used to apply a style only if the entire query matches, useful for preventing older browsers from applying selected styles. If you use the not or only operators, you must specify an explicit media type.
The and keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied all media type, could look like this: 
You can also combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the entire media statement returns true. This is equivalent to an or operator.

and
  <div class="right">
    <img src="http://the-flow.ru/uploads/images/resize/300x0/adaptiveResize/18/11/33/30/25/9497dcc40cd7.png" alt="">
  </div>
 chained feature to return true in order for the query to be true. The not operator is used to negate an entire media query. The only operator is used to apply a style only if the entire query matches, useful for preventing older browsers from applying selected styles. If you use the not or only operators, you must specify an explicit media type.
The and keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied all media type, could look like this: 
You can also combine multiple media queries in a comma-separated list; if any of the media queries in the list is...

CSS

.container {
  width: 500px;
  margin: 0 auto;
  background: #fc0;
}
img {
  width: 300px;
  margin: 0 auto;
  display:  block;
  padding: 15px;
}
.left, .right {
  width:50%;
}
.left {
  float: left;
  display: flex;
  justify-content: flex-end;
}
.right {
  float:right;
}
.left img {
  width: 400px;
  flex: 0 0 auto;
  height: 300px;
}
.right img {
  width: 300px
}