JSFiddle - React, Tailwind, and code Playground

HTML

<footer id="footer">
		<div class="c-4">
			<div class="vertical-text">&copy; Copyright Some vertical text.</div>
			<div class="vertical-text">Oh my god some really long vertical text...how long?!</div>
		</div>
		<div class="c-4">
			<p>Lorem ipsum is a form of nonsense to symbolise real world text.</p>
			
			<p><a href="#" title="Get in touch">Blah blah</a></p>
			<span class="keyline"></span>
		</div>
		<div class="c-4">
			<ul>
                <li>Link 1</li>
                <li>Link 1</li>
			</ul>
			<span class="keyline"></span>
		</div>
		<div class="c-4">
			Social icons
		</div>
	</div>
</footer>

CSS

.vertical-text {
		-webkit-transform: rotate(-90deg);
		-moz-transform: rotate(-90deg);
		-ms-transform: rotate(-90deg);
		-o-transform: rotate(-90deg);
		transform: rotate(-90deg);
		
		-webkit-transform-origin: 0 0;
		-moz-transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		-o-transform-origin: 0 0;
		transform-origin: 0 0;
		
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	}

    footer .vertical-text {	white-space: nowrap; display: block; float: left;	}
	footer .vertical-text:nth-child(2) {margin-left: 25px;	}

/* layout styles */
footer {
		width: 100%;
		position: fixed;
		padding: 0 50px 50px 50px;
		height: 300px;
		bottom: 0;
		left: 0;
		font-size: 14px;
    background: pink;
	}

        footer p,
		footer ul {
			font-size: 14px;
			margin-left: 0;
			padding-left: 0;
			list-style: none;
		}

	    .c-4 {
		width: 25%;
		float: left;
		position: relative;
	    }