I am new to web technologies. I intended to do a project. I want to display all these columns at the same height, but they are not being at same height. I am getting the output in such a way that the 3 columns are not at same level. I want them to start at same height and may end at different heights. how should I correct it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Notices</title>
</head>
<style>
div{
display:inline-block;
}
li{
padding-bottom:10px;
}
</style>
<body>
<div style="border:1px solid #0a81ab;width:30%;margin-right:20px">
<h3 style="padding:0px;margin:0px;background-color:#0a81ab;color:white; font-size:20px">Latest News</h3>
<ul type="circle">
<li>AWS CLOUD LITERACY DAY</li>
<li>Anblicks Ignite Program for 4/4 B.Tech Students</li>
<li>21-09-2019 i.e., Saturday is declared as holiday in lieu of 15-09-2019 to all students, faculty and s...</li>
<li>Spot Admissions 2019:Vacancy Position for B.Tech First Year</li>
<li>I/IV B.Tech I & II Semesters Academic Calendar for the year 2019-20</li>
<li>Department of IT is introducing M.Tech in Data Science for A.Y. 2019-20</li>
<li>AWS CLOUD LITERACY DAY</li>
<li>Anblicks Ignite Program for 4/4 B.Tech Students</li>
<li>21-09-2019 i.e., Saturday is declared as holiday in lieu of 15-09-2019 to all students, faculty and s...</li>
<li>Spot Admissions 2019:Vacancy Position for B.Tech First Year</li>
<li>I/IV B.Tech I & II Semesters Academic Calendar for the year 2019-20</li>
</ul>
<p style="color:grey;float:right;">new archives>></p>
</div>
<div style="border:1px solid #ce1f6a;width:30%;margin-right:20px;">
<h3 style="padding:0px;margin:0px;background-color:#ce1f6a;color:white; font-size:20px">Examinations Notice Board</h3>
<ul type="circle">
<li>Exam fee notifications for B.Tech., III,VI & VII-Semesters and MCA V-Semesters Nov-2019</li>
<li>Results of M.Tech IV-Semester(Project-viva) September-2019</li>
<li>CBCS B.Tech., V,VI,VII & VIII-Semesters (Subjects) Exam fee notification of Nov/Dec-2019</li>
<li>Timetable for B.Tech I to IV-Semesters(VR10 & VR14)-Supple- Oct-2019</li>
<li>Exam fee notification for B.Tech IV & V-Semesters Examinations - Nov-2019</li>
<li>Exam fee notifications for B.Tech., III,VI & VII-Semesters and MCA V-Semesters Nov-2019</li>
<li>Results of M.Tech IV-Semester(Project-viva) September-2019</li>
<li>CBCS B.Tech., V,VI,VII & VIII-Semesters (Subjects) Exam fee notification of Nov/Dec-2019</li>
<li>Timetable for B.Tech I to IV-Semesters(VR10 & VR14)-Supple- Oct-2019</li>
</ul>
<p style="color:grey;float:right;">new archives>></p>
</div>
<div style="border:1px solid #54e346;width:30%;">
<h3 style="padding:0px;margin:0px;background-color:#54e346;color:white; font-size:20px">Quick Links</h3>
<ul type="circle">
<li>Institution Innovation Council</li>
<li>Internal Sliding 2019 Notice</li>
<li>Collaborative Labs</li>
<li>Intellectual Property Policy</li>
<li>Choice Based Credit System Guidelines</li>
<li>Institutional Electives for 3/4 B.Tech Students</li>
<li>Accredition status</li>
<li>NIRF</li>
<li>Faculty Details</li>
<li>Punishments for malpractice cases in exams</li>
<li>Academic Calendar</li>
<li>Governing Body Minutes</li>
<li>NAAC Self Study Report</li>
<li>AICTE Feedback (Faculty/Students)</li>
</ul>
<p style="color:grey;float:right;">new archives>></p>
</div>
</body>
</html>What changes should I make in this to get all three columns at same level (at top)?
