JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
		   <header id="mainHeader">
				<h1>Ami's Search Enginge</h1>
				<div id="searchWrapper">
					<form method="get">
						<input type="search" name="query" placeholder="הזן טקסט לחיפוש" />
						<input type="submit" name="search" value="חפש" />
					</form>	
				</div>
		   </header>
		   <section class="result">
				<article class="searchResult">
					<header class="title">
						<a href="#">כותרת תוצאת חיפוש</a><br />
						<span class="url">http:://www.google.co.il</span>
					</header>
					<section class="description">
							תיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאורתיאור תיאור תיאור 
					</section>
				</article>
	
				<footer id="pagination">
					<a href="#">&lt;</a>
					<a href="#">1</a>
					<a href="#">2</a>
					<a href="#">3</a>
					<a href="#">4</a>
					<a href="#">5</a>
					<a href="#">&gt;</a>
				</footer>
			</section>
		</div>
			<footer id="footer">
				All Right Reserved To Ami
			</footer>

CSS

* {
					box-sizing:border-box;
				}
				html, body {
					height: 100%;
				}
				#wrapper {
					min-height: 100%;
					margin-bottom: -40px; 
				}
				#wrapper:after {
					content: "";
					display: block;
				}
				#footer, #wrapper:after {
					height: 40px; 
				}
				body {
					direction:rtl;
					margin:0;
				}
				#searchWrapper {
					width:40%;
					margin:0 auto;
					position:relative;
				}
				#mainHeader {
					padding-bottom: 15px;
					border-bottom:2px solid blue;
					margin-bottom:15px;
				}
				#mainHeader h1 {
					text-align:center;
					color:blue;
				}
				#searchWrapper input[type=search] {
					width:100%;
					border:1px solid lightgray;
					height:30px;
					padding:5px
				}
				#searchWrapper input[type=submit] {
					position:absolute;
					transform:translateX(-100%);
					left:0;
					top:0;
					bottom: 0;
					height:30px;
					padding:5px;
					background-color:lightgray;
					border:1px solid gray;
				}
				.result {
					margin-bottom:15px;
				}
				.searchResult {
					width:45%;
					margin-right: 15px;
					margin-bottom: 15px;
				}
				.url {
					color:green;
				}
				.searchResult .description {
					font-size:15px;
					line-height:16px;
					height:32px;
					overflow:hidden;
					text-align:right;
				}
				#pagination {
					text-align:center;
				}
				#footer {
					padding:15px;
					text-align:center;
					font-weight:bold;
					background-color:lightgray;
				}