JSFiddle - React, Tailwind, and code Playground

by Bhaumik Mehta

HTML

<div class="wrapper">
	<div class="row row-1">
		<div class="line1">
			<div class="runname">Hip 1</div>
			<div class="logo company-logo"></div>
		</div>
		<div class="line2">This is a lot description</div>
		<div class="line3">This is a consignor name</div>
	</div>
	<div class="row row-2">
		<div class="line1">
			<div class="bid-amount">$1,000,000</div>
			<div class="bid-location">Floor</div>
		</div>
		<div class="line2">
			<div class="announcements">Pregnant</div>
		</div>
	</div>
</div>

CSS

body {
	background: #000;
}
.wrapper {
	width: 100%;
	height: 100%;
	padding: 1em 1em 0 0;
}
.row {
	-webkit-display: flex;
	-ms-display: flexbox;
	display: flex;
	color: #fff;
}
.row-1 {
	flex-direction: column;
}
.row-2 {
	flex-direction: column;
}

/** Each line within row-1 **/
.line1 {
	-webkit-display: flex;
	-ms-display: flexbox;
	display: flex;
	justify-content: space-between;
}
.line1 .runname {
	font-size: 15vh;
}
.line1 .logo {
	width: 22vh;
	height: 20vh;
	background-position: center;
	background-size: contain;
}
.line1 .company-logo {
	background-image: url('https://picsum.photos/id/237/200/300');
}
.row-1 .line2 {
	font-size: 10vh;
}
.row-1 .line3 {
	font-size: 8vh;
}

/** Each line within row-2 **/
.row-2 .line1 {
	padding: 0 1em 0 5em;
}
.row-2 .bid-amount {
	font-size: 30vh;
}
.row-2 .bid-location {
	width: 28vh;
	height: 30vh;
	background-color: blue;
}
.row-2 .announcements {
	text-align: center;
	font-size: 7vh;
	color: red;
	padding: .2em;
}